Created
September 24, 2023 15:10
-
-
Save sonipranjal/f4a66f35924ede2e2f4a8d5b66199857 to your computer and use it in GitHub Desktop.
Supabase + Expo + Google Sign In
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// go to supabase dashboard -> into auth -> url config -> put the Redirect URLs as [your-scheme]://google-auth | |
import * as WebBrowser from "expo-web-browser"; | |
WebBrowser.maybeCompleteAuthSession(); | |
const extractParamsFromUrl = (url: string) => { | |
const parsedUrl = new URL(url); | |
const params = parsedUrl.searchParams; // Using searchParams instead of splitting on "#" | |
const data = { | |
access_token: params.get("access_token"), | |
expires_in: parseInt(params.get("expires_in") || "0"), | |
refresh_token: params.get("refresh_token"), | |
token_type: params.get("token_type"), | |
provider_token: params.get("provider_token"), | |
code: params.get("code"), | |
}; | |
return data; | |
}; | |
// to warm up the browser | |
useEffect(() => { | |
WebBrowser.warmUpAsync(); | |
return () => { | |
WebBrowser.coolDownAsync(); | |
}; | |
}, []); | |
//button | |
<Button | |
onPress={async () => { | |
const res = await supabase.auth.signInWithOAuth({ | |
provider: "google", | |
options: { | |
redirectTo: "[your-scheme]://google-auth", | |
queryParams: { | |
prompt: "consent", | |
}, | |
}, | |
}); | |
const googleOAuthUrl = res.data.url; | |
if (!googleOAuthUrl) return Alert.alert("no oauth url found!"); | |
const result = await WebBrowser.openAuthSessionAsync( | |
googleOAuthUrl, | |
"[your-scheme]://google-auth?", | |
{ | |
showInRecents: true, | |
}, | |
).catch((err) => { | |
console.log(err); | |
}); | |
if (result && result.type === "success") { | |
const params = extractParamsFromUrl(result.url); | |
if (params.code) { | |
const user = await supabase.auth.exchangeCodeForSession( | |
params.code, | |
); | |
console.log(user); | |
return; | |
} else { | |
// sign in/up failed | |
} | |
} else { | |
console.log("handle failed error"); | |
} | |
}} | |
title="Sign in with google" | |
/> |
I'm not be able to finish the sign in with Google, I'm receiving this warning:
The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.
Are you guys know what could be this?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you!