Docs

OAuth with Expo

The example in this guide demonstrates how to build a custom OAuth authentication flow in Expo with Clerk.

Before you start

  1. Follow Clerk's Expo quickstart to ensure your project is configured properly.
  2. You must configure your Clerk instance to enable OAuth.
    1. Navigate to the Clerk Dashboard and in the navigation sidebar, select User & Authentication > Social Connections.
    2. Toggle on the providers that you want to use. For this example, enable Google.
    3. In the modal that appears, ensure that Enable for sign-up and sign-in is enabled and select Save.

Note

For production instances, you will need to provide custom credentials. See the Social Connections guides for more information.

Create an OAuth component

The following example demonstrates a component that creates a custom OAuth sign-in flow for Google accounts.

Note

You can render this component in a custom sign-in flow, which you can find examples of in the Expo quickstart.

components/SignInWithOAuth.tsx
import React from "react";
import * as WebBrowser from "expo-web-browser";
import { Text, View, Button } from "react-native";
import { Link } from "expo-router";
import { useOAuth } from "@clerk/clerk-expo";
import * as Linking from "expo-linking"

export const useWarmUpBrowser = () => {
  React.useEffect(() => {
    // Warm up the android browser to improve UX
    // https://docs.expo.dev/guides/authentication/#improving-user-experience
    void WebBrowser.warmUpAsync();
    return () => {
      void WebBrowser.coolDownAsync();
    };
  }, []);
};

WebBrowser.maybeCompleteAuthSession();

const SignInWithOAuth = () => {
  useWarmUpBrowser();

  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });

  const onPress = React.useCallback(async () => {
    try {
      const { createdSessionId, signIn, signUp, setActive } =
        await startOAuthFlow({ redirectUrl: Linking.createURL("/dashboard", { scheme: "myapp" })});

      if (createdSessionId) {
        setActive!({ session: createdSessionId });
      } else {
        // Use signIn or signUp for next steps such as MFA
      }
    } catch (err) {
      console.error("OAuth error", err);
    }
  }, []);

  return (
    <View>
      <Link href="/">
        <Text>Home</Text>
      </Link>
      <Button title="Sign in with Google" onPress={onPress} />
    </View>
  );
};
export default SignInWithOAuth;

Feedback

What did you think of this content?