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.
OAuth requires enabling deeplinks in your application. Please refer to our resource on Deep linking.
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.
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.
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.
The oauth.google.start() method attempts to complete an OAuth flow using Google Credential Manager on Android. If it fails, it falls back to redirecting the browser to Stytch's oauth google start endpoint. If you prefer to only use a redirect-based OAuth flow, you can use the oauth.google.startWithRedirect() method.
The oauth.apple.start() method attempts to complete an OAuth flow using Sign in with Apple on iOS. If it fails, it falls back to redirecting the browser to Stytch's oauth apple start endpoint. If you prefer to only use a redirect-based OAuth flow, you can use the oauth.apple.startWithRedirect() method.
For other providers, 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.
Additional configuration.
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>
);
};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.
Additional configuration.
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) {
authenticate(route.params.token);
}
}, []);
return <Text>{sessionData}</Text>;
};