Added Audience and STILL getting Opaque token instead of JWT token with React Native

[engineering.dev]

Hello,

I’m currently developing a React Native application using Auth0 for authentication. I have set up the Auth0Provider with the correct audience and I’m using the getCredentials() method to retrieve the access token.

However, I’m encountering an issue where I’m receiving an opaque token instead of the expected JWT token. This is causing problems when I try to use this token to authenticate with my API.

I already referred to these other issues and none of them solved the problem for me:

React Native - Invalid signature on access token

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 a…

Added Audience and STILL getting Opaque token instead of JWT token with React

Hello, I’m currently developing a React application using Auth0 for authentication. I have set up the Auth0Provider with the correct audience and I’m using the getAccessTokenSilently method to retrieve the access token. However, I’m encountering an issue where I’m receiving an opaque token instead of the expected JWT token. This is causing problems when I try to use this token to authenticate with my API. Good to note, my client side code is deployed with AWS Amplify Here’s the relevant code…

Make Request to Auth0 api from react native app

I have a react native app authenticated with Auth0. I have an API that uses react native. When a user signs in, i take the accessToken that is given for that user, and I make request to the API with the accessToken set as the authorization header. I do so like this: const requestHeader = { headers: { Authorization: `Bearer ${accessToken}`, } } axios.post(API_BASE + '/api/example/', requestHeader) The accessToken is something short like this: aBQdd0kOvb1pNj-…

Here is my current config:

 <Auth0Provider
    domain={Config.AUTH0_DOMAIN!}
    clientId={Config.AUTH0_CLIENT_ID!}>
    <RootNavigator />
</Auth0Provider>

And this is my authorize() call:

const handleLogin = async () => {
    try {
      await authorize({
        audience: Config.AUTH0_AUDIENCE,
        scope: 'openid profile email offline_access',
      });
      const credentials = await getCredentials();
      await authenticate(credentials?.accessToken!);
    } catch (e) {
      ToastService.onDanger({
        title: error?.message || t('errors.server-unable'),
      });
    }
  };

API properly configured with the same audience url configured in the App:

How I know I am getting opaque tokens:

1. When trying to use that accessToken, the backend is receiving logs saying that JWT must have 3 parts.
2. Also, I could use this access token to call the /userinfo endpoint (opaque tokens are used for that).

I’ve already applied different solutions and configs here and nothing worked. Can someone please help me with this?