How to specify the Redirect URI for React Native Bare workflow

Viewed 1390

I've just started building a React Native mobile application with Bare workflow(not using Expo framework). I have successfully integrated the login and logout system on my app with react-native-auth0 dependency. However, I am struggling with API Authorization to get the token for the authenticated users in order to control the access to each end point.

I am following Authorization Code Flow with PKCE based on the Auth0 documentation. I've got almost everything working fine except the redirect uri which was mentioned earlier on the title.

I tried to use the expo-auth-session dependency to specify the uri manually like below.

const redirectUri = AuthSession.makeRedirectUri({
    native: `${REDIRECT_URI}`,
    useProxy,
});

const params = {
    audience: `${AUTH0_API_AUDIENCE}`,
    scope: ['openid', 'profile', 'email', 'offline_access'],
    response_type: 'code',
    client_id: `${AUTH0_CLIENT_ID}`,
    redirect_uri: redirectUri,
    code_challenge: `${code_challenge}`,
    code_challenge_method: 'S256',
    state: `${state}`
};

However, it returns the error message saying

Error: No default return URL could be found. If you're using the bare workflow, please provide options.returnUrl. getDefaultReturnUrl@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:179940:24 startAsync$@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:177411:84

I have checked my uri with npx uri-scheme list. at the moment, I've got one ${applicationId}://. Would this be the equivalent to the redirect_uri, wouldn't it?

I've also have checked Auth0.Android. However, this one must be related to Android Native App development?! Anyway, anyone who has used the same architecture before? Where I can specify the Redirect URI for Android application built with React Native? I think the AuthSession API is not supported in Bare workflow. Even though the documentation emphasised, it also articulates the walkthrough for the bare workflow, I gave it a shot. But, it's not working and thrown an error.

I believe this should be done in a native way?!? Java?? I am struggling to find the solution and not even sure where to look at. I would really appreciate your help! :-)

1 Answers

Disclaimer: I’m really not familiar with React Native (nor with mobile actually), but I do know a few things about OAuth and OIDC, and I used Auth0 in the past, so here a few ideas, hopefully helpful.

I have checked my uri with npx uri-scheme list. at the moment, I've got one ${applicationId}://. Would this be the equivalent to the redirect_uri, wouldn't it?

According to Auth0 documentation, the callback URL (i.e. the redirect URL to the local device) should look like {YOUR_APP_PACKAGE_NAME}://${YOUR_AUTH0_APP_NAME}.auth0.com/android/{YOUR_APP_PACKAGE_NAME}/callback So my understanding is that ${applicationId}:// is not equivalent to the redirect URL, but only its prefix.

Have you tried using ${applicationId}://{YOUR_AUTH0_APP_NAME}.auth0.com/android/${applicationId}/callback (replacing ${YOUR_AUTH0_APP_NAME} with the actual value of your Auth0 project name) ?

Related