原生移动深度链接
在某些身份验证情况下,您需要处理链接回应用程序以完成用户登录。
何时需要设置深层链接
- 魔法链接登录。
- 已启用 "确认电子邮件 "并正在使用电子邮件登录。
- 重设电子邮件登录密码。
- 调用
.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 中找到详细的设置说明。