原生移动深度链接

在某些身份验证情况下,您需要处理链接回应用程序以完成用户登录。

何时需要设置深层链接

  • 魔法链接登录。
  • 已启用 "确认电子邮件 "并正在使用电子邮件登录。
  • 重设电子邮件登录密码。
  • 调用 .signInWithOAuth() 方法。
要链接到开发构建或独立应用程序,您需要为应用程序指定自定义 URL 方案。您可以在应用程序配置(app.json、app.config.js)中注册一个方案,方法是在 `scheme` 键下添加一个字符串:
1{
2  "expo": {
3    "scheme": "com.supabase"
4  }
5}

在项目的 auth settings中添加重定向 URL,例如 com.supabase://***

最后,实现 OAuth 和链接处理程序。有关在 React Native 中初始化 supabase-js 客户端的说明,请参阅 supabase-js 参考资料

1import { Button } from "react-native";
2import { makeRedirectUri } from "expo-auth-session";
3import * as QueryParams from "expo-auth-session/build/QueryParams";
4import * as WebBrowser from "expo-web-browser";
5import * as Linking from "expo-linking";
6import { supabase } from "app/utils/supabase";
7
8WebBrowser.maybeCompleteAuthSession(); // required for web only
9const redirectTo = makeRedirectUri();
10
11const createSessionFromUrl = async (url: string) => {
12  const { params, errorCode } = QueryParams.getQueryParams(url);
13
14  if (errorCode) throw new Error(errorCode);
15  const { access_token, refresh_token } = params;
16
17  if (!access_token) return;
18
19  const { data, error } = await supabase.auth.setSession({
20    access_token,
21    refresh_token,
22  });
23  if (error) throw error;
24  return data.session;
25};
26
27const performOAuth = async () => {
28  const { data, error } = await supabase.auth.signInWithOAuth({
29    provider: "github",
30    options: {
31      redirectTo,
32      skipBrowserRedirect: true,
33    },
34  });
35  if (error) throw error;
36
37  const res = await WebBrowser.openAuthSessionAsync(
38    data?.url ?? "",
39    redirectTo
40  );
41
42  if (res.type === "success") {
43    const { url } = res;
44    await createSessionFromUrl(url);
45  }
46};
47
48const sendMagicLink = async () => {
49  const { error } = await supabase.auth.signInWithOtp({
50    email: "example@email.com",
51    options: {
52      emailRedirectTo: redirectTo,
53    },
54  });
55
56  if (error) throw error;
57  // Email sent.
58};
59
60export default function Auth() {
61  // Handle linking into app from email app.
62  const url = Linking.useURL();
63  if (url) createSessionFromUrl(url);
64
65  return (
66    <>
67      <Button onPress={performOAuth} title="Sign in with Github" />
68      <Button onPress={sendMagicLink} title="Send Magic Link" />
69    </>
70  );
71}

为了获得最佳的用户体验,建议使用通用链接,这需要更复杂的设置。您可以在 Expo docs 中找到详细的设置说明。