Search code examples
react-nativemobileexpo

Error trying to decode a Token using jwt-decode


I am trying to establish communication between two projects. In one project, I have created an API called voll-api-nodejs, and the other project voll-mobile is the one consuming data from this API.

In the voll-api-nodejs project, I have the following code to generate the token signature:

const token = jwt.sign({ id, role }, process.env.SECRET, {
  expiresIn: 86400
}); // expires in 24 hours

res.status(200).json({
  auth: true,
  token
});

In my voll-mobile project, I am using the following code to consume data from my API and extract the token:

import { jwtDecode } from "jwt-decode";

const result = await api.post("/auth/login", {
  email,
  password,
});

const token = result.data.token;
const decodedToken = jwtDecode(token);
const myId = decodedToken.id;

The error occurs when using jwtDecode to decode the token. The error log is as follows: "Error decoding token: [InvalidTokenError: Invalid token specified: invalid base64 for part #2 (Property 'atob' doesn't exist)]"

Note: I used the website https://jwt.io/ to verify the authenticity of the token, and it is valid. I'll leave the token below if anyone wants to verify it as well:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI1NzlkMTVmLWY0ZjEtNGEwOS04MGRjLTk3OTdiZmZmMzg4NyIsInJvbGUiOiJQQUNJRU5URSIsImlhdCI6MTcwMjY3MzM1MiwiZXhwIjoxNzAyNzU5NzUyfQ.Oz7iBmkfPCVDr0s-JlzGjyvpZIPvJBYsrjqOT0tJQ3w

Solution

  • As per jwt-decode README.md:

    This library relies on atob(), which is a global function available on all modern browsers as well as every supported node environment.

    In order to use jwt-decode in an environment that has no access to atob() (e.g. React Native), ensure to provide the corresponding polyfill in your application by using core-js/stable/atob:

    import "core-js/stable/atob";
    

    Alternatively, you can also use base-64 and polyfill global.atob yourself:

    import { decode } from "base-64";
    global.atob = decode;