Auth

Native Mobile Deep Linking

Set up Deep Linking for mobile applications.

Many Auth methods involve a redirect to your app. For example:

  • Signup confirmation emails, Magic Link signins, and password reset emails contain a link that redirects to your app.
  • In OAuth signins, an automatic redirect occurs to your app.

With Deep Linking, you can configure this redirect to open a specific page. This is necessary if, for example, you need to display a form for password reset, or to manually exchange a token hash.

Setting up Deep Linking

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.