Skip to content

Instantly share code, notes, and snippets.

@sonipranjal
Created September 24, 2023 15:10
Show Gist options
  • Save sonipranjal/f4a66f35924ede2e2f4a8d5b66199857 to your computer and use it in GitHub Desktop.
Save sonipranjal/f4a66f35924ede2e2f4a8d5b66199857 to your computer and use it in GitHub Desktop.
Supabase + Expo + Google Sign In
// 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"
/>
@Schotsl
Copy link

Schotsl commented Oct 28, 2023

@Schotsl, was able to get around this by using Supabase's auth.setSession() instead. It takes the access_token and refresh_token as arguments which can be retrieved using this method.

I also had to refactor the extractParamsFromUrl() function a bit to get params in a more reliable way using:

const parsedUrl = new URL(url);
const params = new URLSearchParams(parsedUrl.hash.replace("#", "?")); // Using searchParams instead of splitting on "#"

I hope this helps.

Thanks so much for this gist @sonipranjal 🙏🏾

Thanks for the quick reply! And thanks @sonipranjal :)

@martinezynwa
Copy link

thank you!

@thiagoadsix
Copy link

thiagoadsix commented Mar 31, 2024

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