Implementing Auth0 in React Native / Expo App

Help
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.

4 Likes
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()}
        />
    );
}

}

2 Likes
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 - #9 by mhopey 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!

1 Like
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.

1 Like
16

Hi, I’m also trying to implement a Refresh token flow with my react-native expo app.

From the last bit of this post it seems like the next step is implementing the Code Authorization grant with PKCE manually. Has anyone had any success with that?

I’m going to try to work through it with this tutorial, I’ll check back if I’m succesful:
I’m Call Your API Using the Authorization Code Flow with PKCE

17

It looks like that tutorial requires the ‘crypto’ library, which expo does not support. So it’s not possible to use it unless you are detached.

Edit: Found this blog post that recommends generating the random string and hash on the API level. That’s my plan for now, hope this helped someone else!

2 Likes
18

If you are just allowing users to login via email/password then passwordRealm should return the refresh token. However you won’t be able to get the refresh token if you’re using social login providers.

If your use case was: keep your users from needing to login every time by storing the refresh token (using AsyncStorage) and using /oauth/token with grant type refresh_token to authenticate.

You may want to instead store the expiresAt value to validate that the user’s session still exists on Auth0 (you can also extend token expiry time). Then you can store and reuse their access token to avoid re-authenticating, although this might not be the most secure method.

If someone has a better/more secure way of implementing this kind of flow, please share.

19

Apparently, you can securely store a refresh_token using Expo’s SecureStore API SecureStore - Expo Documentation

Can anyone confirm this is the way to go when implementing Auth0 on Expo?

20

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.