DEV Community

Lakhan Samani
Lakhan Samani

Posted on

How to use Authorizer with React Native Expo?

#authorizer #reactnative #opensource

Authorizer is an open source solution for your authentication and authorization needs. It connects with your database and allows to have secure auth layer on top of it.

In this post we will see how you can have authentication ready for your mobile application, which is developed using react native and expo

Here are the 10 steps you need to follow:

Step 1: Get Authorizer Instance

Deploy production ready Authorizer instance using one click deployment options available below

Infra provider One-click link Additional information
Railway.app Deploy on Railway docs
Heroku Deploy to Heroku docs
Render render button docs

For more information check docs

Step 2: Setup Instance

  • Open authorizer instance endpoint in browser
  • Signup with a secure password
  • Configure social logins / smtp server and other environment variables based on your needs

For more information please check docs

Step 3: Install expo 

npm install --global expo-cli
Enter fullscreen mode Exit fullscreen mode

Step 4: Bootstrap react native project 

expo init with-react-native-expo
Enter fullscreen mode Exit fullscreen mode

Select blank default app

Step 5: Install dependencies 

npm install @authorizerdev/authorizer-js expo-auth-session expo-random expo-secure-store expo-web-browser jwt-decode react-native-base64
Enter fullscreen mode Exit fullscreen mode

Step 6: Create redirect url

Redirect URL is used to redirect back to your application once the authentication process is complete

const useProxy = false;
const redirectUri = AuthSession.makeRedirectUri({ useProxy });
Enter fullscreen mode Exit fullscreen mode

Step 7: Create AuthorizerJS Client

  • Get your client ID from authorizer dashboard environment variable section 
const authorizerClientID = "YOUR_CLIENT_ID";
const authorizerURL = "YOUR_AUTHORIZER_INSTANCE_URL";
const authorizationEndpoint = `${authorizerURL}/authorize`;
const authorizerRef = new Authorizer({
  clientID: authorizerClientID,
  authorizerURL: authorizerURL,
  redirectURL: redirectUri,
});
Enter fullscreen mode Exit fullscreen mode

Step 8: Setup Expo AuthSession

Configure useAuthRequest hook with above configs

Note: Use offline_access in scope if you want to get refresh token and want to perform silent refresh when user comes back to app. If your app is data sensitive we do not recommend using refresh token (example banking / finance app)

const [request, result, promptAsync] = AuthSession.useAuthRequest(
  {
    redirectUri,
    clientId: authorizerClientID,
    // id_token will return a JWT token
    responseType: "token",
    // use offline access to get a refresh token and perform silent refresh in background
    scopes: ["openid", "profile", "email", "offline_access"],
    extraParams: {
      // ideally, this will be a random value
      nonce: "nonce",
    },
  },
  { authorizationEndpoint }
);
Enter fullscreen mode Exit fullscreen mode

Step 9: Listen to the authentication process change

Get auth session result and set refresh token in secure store for silent refresh.
You also get the access token, id token for the further usage

const authorizerRefreshTokenKey = `authorizer_refresh_token`;

useEffect(() => {
  async function setResult() {
    if (result) {
      if (result.params.refresh_token) {
        await SecureStore.setItemAsync(
          authorizerRefreshTokenKey,
          result.params.refresh_token
        );
      }

      if (result.error) {
        Alert.alert(
          "Authentication error",
          result.params.error_description || "something went wrong"
        );
        return;
      }

      if (result.type === "success") {
        // Retrieve the JWT token and decode it
        const jwtToken = result.params.id_token;
        const decoded = jwtDecode(jwtToken);

        const { email } = decoded;
        setEmail(email);
      }
    }
  }
  setResult();
}, [result]);
Enter fullscreen mode Exit fullscreen mode

Step 10: Silent Refresh

Perform Silent Refresh. Note silent refresh will give you new access token, id token and refresh token.
You can use access token & id token for further API requests.

// on init of app silently refresh token if it exists
useEffect(() => {
  async function silentRefresh() {
    try {
      const refreshToken = await SecureStore.getItemAsync(
        authorizerRefreshTokenKey
      );
      if (refreshToken) {
        try {
          const res = await authorizerRef.getToken({
            grant_type: "refresh_token",
            refresh_token: refreshToken,
          });
          await SecureStore.setItemAsync(
            "authorizer_refresh_token",
            res.refresh_token
          );
          setEmail(jwtDecode(res.id_token).email);
        } catch (err) {
          console.error(err);
          await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
        }
      }
    } catch (error) {
      setEmail(null);
      await SecureStore.deleteItemAsync(authorizerRefreshTokenKey);
    } finally {
      setLoading(false);
    }
  }
  silentRefresh();
}, []);
Enter fullscreen mode Exit fullscreen mode

Also you can perform silent refresh when access token / id token expires. You also get expires_in in the response of token which you can use. So you can set time interval after which it should fetch new tokens.

That's all you need. Secure authentication will be up and running for your application 🎉.

Here is Github repo that has sample application code: https://github.com/authorizerdev/examples/tree/main/with-react-native-expo

For more information check:

Site: https:://authorizer.dev
Docs: https://docs.authorizer.dev
Youtube: https://youtube.com/playlist?list=PLSQGbUjHc6bpaAgCiQPzNxiUPr7SkDAFR
Github: https://github.com/authorizerdev/authorizer
Product hunt: https://www.producthunt.com/posts/authorizer
Discord: https://discord.gg/bSPgHKZR

Top comments (0)

Read next

vidvatek profile image

How to Create Moment JS Calendar in React Native

vidvatek -

handipriyono profile image

React Native Scaler: Perfecting App Aesthetics Across Multiple Devices

Handi Priyono -

taufik-h profile image

NeuBeam - New Tailwind CSS Component Library for stylish Web Development

Taufik Hidayatulloh -

amankumarsingh01 profile image

React native and the JavaScript bridge.

A -