Search code examples
expogoogle-signinclerk

Expo (SDK v52) + Clerk Google OAuth: Redirects Successfully but No User Info or Session ID Logged


I'm implementing Google sign-up using Clerk in my Expo app (SDK v52). Here's my component code:

import React from "react"
import * as WebBrowser from "expo-web-browser"
import { Alert } from "react-native"
import { useOAuth, useUser } from "@clerk/clerk-expo"
import * as Linking from "expo-linking"
import { Button, ButtonIcon, ButtonText } from "../ui/button"
import { GoogleIcon } from "@/app/auth/assets/icons/google"

export const useWarmUpBrowser = () => {
  React.useEffect(() => {
    void WebBrowser.warmUpAsync()
    return () => {
      void WebBrowser.coolDownAsync()
    }
  }, [])
}

WebBrowser.maybeCompleteAuthSession()

export default function Page() {
  useWarmUpBrowser()

  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" })
  const { user, isLoaded: isUserLoaded, isSignedIn } = useUser()

  const onPress = React.useCallback(async () => {
    try {
      const { createdSessionId, setActive } = await startOAuthFlow({
        redirectUrl: Linking.createURL("/(drawer)/(tabs)/", { scheme: "com.anonymous.restoticketmobile" }),
      })

      console.log("OAuth flow completed")
      console.log("Redirect URL used:", Linking.createURL("/(drawer)/(tabs)/"))
      
      if (createdSessionId) {
        await setActive!({ session: createdSessionId })
        console.log("Created Session ID:", createdSessionId)

        // Wait for user data to load
        await new Promise((resolve) => {
          const checkUser = setInterval(() => {
            if (isUserLoaded && isSignedIn) {
              clearInterval(checkUser)
              resolve(true)
            }
          }, 100)
        })

        // Log user data
        console.log("User Data:", JSON.stringify(user, null, 2))
      } else {
        Alert.alert("Login Failed", "Unable to create a session.")
      }
    } catch (err) {
      console.error("OAuth Error:", JSON.stringify(err, null, 2))
      Alert.alert("Error", "An error occurred during sign in.")
    }
  }, [isUserLoaded, isSignedIn, user])

  return (
    <Button onPress={onPress} disabled={!isUserLoaded}>
      <ButtonText>Continue with Google</ButtonText>
      <ButtonIcon as={GoogleIcon} />
    </Button>
  )
}

in my app.json i have this: ... "scheme": "com.anonymous.restoticketmobile" ....,

When I press the "Continue with Google" button, the app redirects to the correct page (/(drawer)/(tabs)/) successfully. However, I'm not seeing the following logs:

  • console.log("Created Session ID:", createdSessionId)
  • console.log("User Data:", JSON.stringify(user, null, 2))

Environment:

  • Expo SDK: v52
  • Clerk version: Latest
  • React Native: Latest compatible version

Question: Why am I not getting the session ID or user data, and how can I debug this issue? Is there any additional configuration needed for Clerk with Expo to properly handle the OAuth flow?

  • Verified that the redirect URL (Linking.createURL("/(drawer)/(tabs)/")) is correct.
  • im expecting after the signup sucess to redirect to the app and get the user information

Solution

  • Clerk Docs team here.

    It's because of the way setActive() works - anything that comes after it actually won't be executed.

    So if you need the session ID or any user information, I'd rely on the hooks such as useAuth() for the session ID, or useUser() to grab the User object to get any user information.

    If you need further help, you can always reach out in our Discord for quick replies: https://clerk.com/discord