OAuth

OAuth is a popular authentication framework that delegates authentication to an external identity provider (often shortened to IdP) like Google, Facebook, Apple, and Microsoft. A user relies on their membership from that provider to sign in instead of creating another password, and developers can enrich their users' experiences with the information shared by the providers.

The React Native SDK provides methods to start and authenticate OAuth flows that you can connect to your own UI.

Configuration

OAuth requires enabling deeplinks in your application. Please refer to our resource on Deep linking.

Native OAuth

If you are using a native OAuth flow (Google One Tap on Android, Sign in With Apple on iOS), there are some slight differences from a regular OAuth flow.

There is no need to make an authenticate call. This call is made for you as part of the native flow.
There is no URL change on success as you would expect with traditional OAuth; in order to see a success event, make sure you pass an onCompleteCallback to the start method.
For Google OneTap on Android, you must make sure to create an Android-specific OAuth Client in your Google Cloud Console. This means you will set up two OAuth credentials: one as a "Web Application", which you will use to configure Google OAuth in your Stytch Dashboard; and one as "Android", which will include your signing certificate fingerprint, and authorizes your application for OneTap.

Methods

The SDK provides methods that can be used to get the URL to start an OAuth flow and authenticate tokens in the links later.

To call these methods, OAuth must be enabled in the SDK Configuration page of the Stytch dashboard.

Start

The oauth.$provider.start() methods start OAuth flows by redirecting the browser to one of Stytch's oauth start endpoints. The method will also generate a PKCE code_verifier and store it in local storage on the device (See the PKCE OAuth guide for details). If your application is configured to use a custom subdomain with Stytch, it will be used automatically.

oauth.amazon.start()
oauth.apple.start()
oauth.bitbucket.start()
oauth.coinbase.start()
oauth.discord.start()
oauth.facebook.start()
oauth.github.start()
oauth.gitlab.start()
oauth.google.start()
oauth.linkedin.start()
oauth.microsoft.start()
oauth.salesforce.start()
oauth.slack.start()
oauth.twitch.start()
oauth.yahoo.start()

Method parameters

Configuration object

Additional configuration.

login_redirect_url string

signup_redirect_url string

custom_scopes string

session_duration_minutes string

onCompleteCallback (OAuthNativeAuthenticateResponse) => void

import { useStytch } from '@stytch/react-native';

export const OAuthStart = () => {
  const stytch = useStytch();

  const loginWithGoogle = () => {
    stytch.oauth.google.start({
      login_redirect_url: 'https://example.com/authenticate',
      signup_redirect_url: 'https://example.com/authenticate',
    });
  };

  return (
    <View>
      <TouchableOpacity onPress={loginWithGoogle}>
        <Text>Login with Google</Text>
      </TouchableOpacity>
    </View>
  );
};

Authenticate

The authenticate method wraps the authenticate OAuth API endpoint which validates the OAuth token passed in.

If this method succeeds, the user will be logged in, granted an active session, and the session data will be persisted on device.

You can listen for successful login events anywhere in the codebase with the stytch.session.onChange() method or useStytchSession hook.

Method parameters

token* string

Configuration* object

Additional configuration.

session_duration_minutes* string

import { useEffect, useState } from 'react';
import { useStytch } from '@stytch/react-native';

export const OAuthAuthenticate = ({ route }) => {
  const stytch = useStytch();
  const [sessionData, setSessionData] = useState();

  const authenticate = (token) => {
    stytch.oauth.authenticate(token, { session_duration_minutes: 60 }).then((resp) => setSessionData(resp));
  };

  useEffect(() => {
    if (stytch) {
      // Note: For Facebook OAuth, slice the token to the correct length (44 characters).
      const token = route.params.token.slice(0, 44);
      authenticate(token);
    }
  }, []);

  return <Text>{sessionData}</Text>;
};