The React Native SDK provides the option for you to use pre-built login flows, supporting dark and light themes, with easy configuration, detailed below.
UI Configuration
Handling Deeplinks
For Email Magic Links, OAuth, SSO, and Password Reset flows, this component handles the deeplinking automatically. You'll need to add a custom URL scheme and redirect URL as explained below.
First, you need to configure your app to listen for a deeplink with the scheme: stytch-ui-[YOUR_PUBLIC_TOKEN]. How you do that will depend on your supported platforms and whether you are using bare React Native or Expo.
Second, you'll need to add a special redirect URL in your Stytch Dashboard Redirect URLs. It should have a URL of stytch-ui-[YOUR_PUBLIC_TOKEN]://deeplink and be applied to all redirect types.
Once both the scheme (in your app) and the redirect URL (in your Dashboard) are configured, our pre-built UI should handle the rest.
Fields
client* StytchB2BClient
config* StytchRNB2BUIConfig
callbacks object
import React from 'react';
import {
StytchB2BUI,
StytchRNB2BUIConfig,
AuthFlowType,
B2BProducts,
B2BOAuthProviders,
Callbacks,
StytchEventType,
} from '@stytch/react-native';
import { useStytchB2BClient } from '@stytch/react-native/b2b';
const Login = ({ navigation }) => {
const stytch = useStytchB2BClient();
const callbacks: Callbacks = {
onEvent(event) {
if (event.type == StytchEventType.AuthenticateFlowComplete) {
navigation.navigate('Profile');
}
},
};
const config: StytchRNB2BUIConfig = {
productConfig: {
products: [B2BProducts.emailMagicLinks, B2BProducts.oauth, B2BProducts.passwords, B2BProducts.sso],
authFlowType: AuthFlowType.Organization,
sessionOptions: { sessionDurationMinutes: 60 },
oauthOptions: {
providers: [B2BOAuthProviders.Google],
},
},
organizationSlug: 'your-organization-slug',
};
return <StytchB2BUI client={stytch} config={config} callbacks={callbacks}></StytchB2BUI>;
};
export default Login;