CODEWITHSUNDEEP
expogoogle-signinclerk
med kalil ben ahmed
med kalil ben ahmed

Reputation: 23

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:

Environment:

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?

Upvotes: 0

Views: 87

Answers (2)

Maique
Maique

Reputation: 36

In your clerk account, if you set username as required, it for some reason makes the redirect fail, i don't know how to do this if requires username but if you disable this rule in the clerk dashboard it will work!

Upvotes: 0

alexisintech
alexisintech

Reputation: 36

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

Upvotes: 1

Related Questions