Prepare for the PgBouncer and IPv4 deprecations on 26th January 2024

Home

Native Mobile Deep Linking

In certain auth scenarios you will need to handle linking back into your application to finish the user's sign in.

  • Magic link login.
  • Have confirm email enabled and are using email login.
  • Resetting password for email login.
  • Calling .signInWithOAuth() method.

To link to your development build or standalone app, you need to specify a custom URL scheme for your app. You can register a scheme in your app config (app.json, app.config.js) by adding a string under the scheme key:


_10
{
_10
"expo": {
_10
"scheme": "com.supabase"
_10
}
_10
}

In your project's auth settings add the redirect URL, e.g. com.supabase://**.

Finally, implement the OAuth and linking handlers. See the supabase-js reference for instructions on initializing the supabase-js client in React Native.

./components/Auth.tsx

_71
import { Button } from "react-native";
_71
import { makeRedirectUri } from "expo-auth-session";
_71
import * as QueryParams from "expo-auth-session/build/QueryParams";
_71
import * as WebBrowser from "expo-web-browser";
_71
import * as Linking from "expo-linking";
_71
import { supabase } from "app/utils/supabase";
_71
_71
WebBrowser.maybeCompleteAuthSession(); // required for web only
_71
const redirectTo = makeRedirectUri();
_71
_71
const createSessionFromUrl = async (url: string) => {
_71
const { params, errorCode } = QueryParams.getQueryParams(url);
_71
_71
if (errorCode) throw new Error(errorCode);
_71
const { access_token, refresh_token } = params;
_71
_71
if (!access_token) return;
_71
_71
const { data, error } = await supabase.auth.setSession({
_71
access_token,
_71
refresh_token,
_71
});
_71
if (error) throw error;
_71
return data.session;
_71
};
_71
_71
const performOAuth = async () => {
_71
const { data, error } = await supabase.auth.signInWithOAuth({
_71
provider: "github",
_71
options: {
_71
redirectTo,
_71
skipBrowserRedirect: true,
_71
},
_71
});
_71
if (error) throw error;
_71
_71
const res = await WebBrowser.openAuthSessionAsync(
_71
data?.url ?? "",
_71
redirectTo
_71
);
_71
_71
if (res.type === "success") {
_71
const { url } = res;
_71
await createSessionFromUrl(url);
_71
}
_71
};
_71
_71
const sendMagicLink = async () => {
_71
const { error } = await supabase.auth.signInWithOtp({
_71
email: "example@email.com",
_71
options: {
_71
emailRedirectTo: redirectTo,
_71
},
_71
});
_71
_71
if (error) throw error;
_71
// Email sent.
_71
};
_71
_71
export default function Auth() {
_71
// Handle linking into app from email app.
_71
const url = Linking.useURL();
_71
if (url) createSessionFromUrl(url);
_71
_71
return (
_71
<>
_71
<Button onPress={performOAuth} title="Sign in with Github" />
_71
<Button onPress={sendMagicLink} title="Send Magic Link" />
_71
</>
_71
);
_71
}

For the best user experience it is recommended to use universal links which require a more elaborate setup. You can find the detailed setup instructions in the Expo docs.