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:
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…
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…
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:
When trying to use that accessToken, the backend is receiving logs saying that JWT must have 3 parts.
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?
Forgot to mention:
react-native version: 0.72.12
react-native-auth0 version: 3.2.1
And this is the req/res from the call that Auth0 Webmodal makes internally (real values omitted):
Request:
POST https://zzzzz.auth0.com/oauth/token
{
"code": "qOwUxrVRdW56nMhXOzMR0Prfi5mVFOxxxxxxxxxx",
"code_verifier": "8oSRbIN3r3Zwe-kukkdzjCSuvKn-xxxxxxxxx",
"redirect_uri": "com.xxx.xxx.auth0://yyyy.com/ios/com.xxx.xxx/callback",
"grant_type": "authorization_code",
"client_id": "ucZ8TGpHCHF9FqRiEZppxxxxxxx"
}
Response:
{
"access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InRVNVNqWHNmVVRaVjJrR2FtMDdDTSJ9.eyJodHRwczovL2NoYXJ0ZXJ1cC5jb20vZW1haWwiOiJicnlhbitnaWFudHM1QGNoYXJ0ZXJ1cC5jb20iLCJodHRwczovL2NoYXJ0ZXJ1cC5jb20vYXBwbGljYXRpb24iOiJkcml2ZXJfbW9iaWxlX2FwcCIsImlzcyI6Imh0dHBzOi8vbG9naW4uZGV2LmNoYXJ0ZXJ1cC5jb20vIiwic3ViIjoiYXV0aDB8ODE0NzgiLCJhdWQiOlsiaHR0cHM6Ly9jaGFydGVydXAtZGV2LnVzLmF1dGgwLmNvbS9hcGkvdjIvIiwiaHR0cHM6Ly9jaGFydGVydXAtZGV2LnVzLmF1dGgwLmNvbS91c2VyaW5mbyJdLCJpYXQiOjE3MzEwOTU2ODksImV4cCI6MTczMTE4MjA4OSwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCBvZmZsaW5lX2FjY2VzcyIsImF6cCI6InVjWjhUR3BIQ0hGOUZxUmlFWnBwNFdHNjlZejdNSTBxIn0.Z3GVQjSDg8gnABmgwN8sK9VBFV6gQJv6S8tbgC-u7oCrEWMo0xm8j5v8m6nnh0Fdxxxxxxxxxxxxxxxxxxxx",
"refresh_token": "v1.MbOLx0NYc1IuFxyREpXbWRD4aNbakE5ISAihbbJnFf5x0hDB181b7Sxxxxxxxxxx",
"id_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InRVNVNqWHNmVVRaVjJrR2FtMDdDTSJ9.eyJnaXZlbl9uYW1lIjoiQnJ5YW4iLCJmYW1pbHlfbmFtZSI6IkdpYW50czUiLCJuaWNrbmFtZSI6ImJyeWFuK2dpYW50czUiLCJuYW1lIjoiQnJ5YW4gR2lhbnRzNSIsInBpY3R1cmUiOiJodHRwczovL3NlY3VyZS5ncmF2YXRhci5jb20vYXZhdGFyLzk0MjU3OTg4MzljZTQxOTVkMzZiYWUzN2UzZGQ4ZGFjP3M9NDgwJnI9cGcmZD1odHRwcyUzQSUyRiUyRmNkbi5hdXRoMC5jb20lMkZhdmF0YXJzJTJGYmcucG5nIiwidXBkYXRlZF9hdCI6IjIwMjQtMTEtMDhUMTk6NDY6NDIuODQwWiIsImVtYWlsIjoiYnJ5Yxxxxxxxxxxxxxx",
"scope": "openid profile email offline_access",
"expires_in": 86400,
"token_type": "Bearer"
}
Problem was solved.
It was a token resolution problem at backend side.