React Native - Invalid signature on access token

Knowledge Solutions
,
1

Problem statement

I am using “React Native” for mobile applications. I am following the link below to integrate Auth0 into my mobile application: ref: Auth0 React Native SDK Quickstarts: Login

After a successful login, I am getting user info. I am trying to obtain an access token from Auth0 by creating an application in Auth0. In the web, it’s working fine, but on mobile, I am encountering the issue of “Invalid signature.” I am passing the audience parameter in the Auth provider. On mobile, I am using getCredentials() to obtain the access and ID Token.

Symptoms

The access token received is missing payload.

Steps to reproduce

Use the React Native quickstart (Auth0 React Native SDK Quickstarts: Login), and edit the App.js authorize() call to not pass any parameters.

Troubleshooting

The Auth0Provider does not take any parameters other than client_id and domain; the rest must be specified when calling authorize().

Cause

This issue is caused by a lack of parameters passed in the authorize() call, resulting in an opaque token that is only meant for Auth0 server consumption.

Solution

This can occur when the authorize request is missing parameters, and thus it defaults to a token that is only valid for the Auth0 /userinfo endpoint, which is an opaque token only readable by Auth0’s servers.

The Auth0Provider only accepts the domain and client ID; additional parameters will be ignored.

So the rest of the configuration needs to be provided in the authorize() call:

  • Example:
await authorize({scope: 'openid profile email', audience: '<your desired API identifier here>'});

References:

1 Like