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?
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