Auth0 Home Blog Docs

Implementing Auth0 in React Native / Expo App


#1

Has anyone implemented Auth0 in a React Native / Expo app? Can anyone point me to an article?

Any advice or suggestions would be appreciated. Thank you!

Sam


#3

Hey @imsam67!

Here you can find quickstarts and docs on how to achieve that:

Hope it helps!


#4

Hey @imsam67!

Have you been able to utilize the content I provided to create the app that you wanted?

Let me know if you need additional help!


#5

Thank you for the link!

Haven’t been able to get to it yet but I’ll try and let you know if I get stuck. Is it safe to assume that the instructions in the documentation will work in an Expo project as well?


#6

The tutorial itself is mainly aimed at react native however you should not have any trouble making it work with Expo as well as there were quite a few people in our community who already tried that.

Let me know down the road if you need any further help!


#7

The tutorial provided by the community support staff isn’t plug and play with expo (the login-flow promise at the end won’t work, it’s clear the support staff member who posted this doesn’t know the actual answer). This is because set of available expo libraries and react-native libraries don’t intersect 100%, so it’s not a workable solution without some expo specific development. I will post a solution here shortly.


#8

@iamuncomfortable Thank you for your response. Really appreciate your posting a solution on this and your timing is perfect as this is the next item to tackle in my to do list! Thanks again!


#9

@iamuncomfortable did you get this working? please post a link if so. thanks!


#10

Here is the solution I used, it uses expo’s way of doing things.

The steps used in this solution are to:

  1. Import the AuthSession module from expo
  2. Set your auth0Domain and ClientID as available variables (although I’d use a more secure solution like environment variables in production)
  3. Use the Expo AuthSession module to set a redirect url and set the authentication URL
  4. Use the Expo AuthSession module to initiate the redirect process
  5. Store the resulting token as you see fit (in this case, in the Redux store)
  6. Allow a user component to trigger the process (we wrapped steps 2-5 in a component method)

Hope it helps!

import { AuthSession } from ‘expo’;
const auth0Domain = ‘https://yourdomain.auth0.com’;
const auth0ClientId = ‘yourid’;
class Auth0LoginContainer extends React.Component<Props, State> {

_loginWithAuth0 = async () => {
    const redirectUrl = AuthSession.getRedirectUrl();
    let authUrl = `${auth0Domain}/authorize` + toQueryString({
        client_id: auth0ClientId,
        response_type: 'token',
        scope: 'openid profile email',
        redirect_uri: redirectUrl,
    });
    console.log(`Redirect URL (add this to Auth0): ${redirectUrl}`);
    console.log(`AuthURL is:  ${authUrl}`);
    const result = await AuthSession.startAsync({
        authUrl: authUrl
    });

    if (result.type === 'success') {
        console.log(result);
        let token = result.params.access_token;
        this.props.setToken(token);
        this.props.navigation.navigate("Next Screen");
    }
};

render() {
    return (
        <Login
            navigation={this.props.navigation}
            onLogin={() => this._loginWithAuth0()}
        />
    );
}

}


#11

Thanks a lot @iamuncomfortable for sharing the solution with rest of community!

@nader @imsam67 @iamuncomfortable thank you a lot for feedback about our Expo tutorial content. I already redirected it to our product team so they will prioritize it in the backlog and make sure it gets revamped a bit.

If at some point in the future you’d like to report some other feedback, the best way to do it directly is through our feedback site:

Sorry for not providing the exact form of knowledge you required and glad you made it work!


#13

Thanks @iamuncomfortable, this was very helpful. I added a audience param to the authorize request so that I could get back a JWT vs an opaque string (https://auth0.com/docs/tokens/set-access-token-format)

A follow up question. Have you implemented automatically refreshing the token?


#14

According to this: React-native-auth0 embedded social login not returning refresh token calling /authorize directly is triggering an implicit flow which doesn’t support refresh tokens.

Also seems like react_native_auth0 doesn’t work with Expo.

Any help on getting refresh tokens working with an Expo app would be appreciated!


#15

Maybe this is helpful, maybe it’s not but here’s what I ended up doing: I abandoned Expo all together and switched to pure React Native. My primary reason for using Expo was that I’m on a PC and wanted to be able to test my app on iOS but I realized, I was developing using the Android emulator all the time and not the Expo app. So, I decided to make the switch and not subject myself to these limitations.