在本机反应中使用 supabase 时保持用户登录

Question

我构建了一个如下所示的身份验证函数：

const handleLogin = async (type) => {
    const { user, error } =
      type === "LOGIN"
        ? await supabase.auth.signIn({ email, password })
        : await supabase.auth.signUp({ email, password });

    if (error) {
      alert(error);
    } else if (!user && !error) {
      alert("An email has been sent to you for verification!");
    }
  };

获取 jwt 并获取用户：

   useEffect(() => {
    
        async () => {
          const jwt = await AsyncStorage.getItem("user");
          const currentUser = supabase.auth.api.getUser(jwt)
          console.log(currentUser)
        }
    
    
        const session = supabase.auth.session();
        setUser(session?.user ?? null);
    
        const { data: authListener } = supabase.auth.onAuthStateChange(
          async (event, session) => {
            const currentUser = session?.user;
            await AsyncStorage.setItem("user", session.access_token);
            console.log(await AsyncStorage.getItem("user"));
            setUser(currentUser ?? null);
          }
        );
    
        return () => {
          authListener?.unsubscribe();
        };
      }, [user]);

但我似乎找不到让用户在应用程序中保持登录状态的方法。每次重新启动时，用户都需要重新登录。

有什么想法吗？提前致谢！

Answer 1

您可以使用以下方法来实现。

使用 AsyncStorage 在本地存储令牌。
在 App.js 的 UseEffect 中，如果用户收到令牌，则从 AsyncStorage 获取令牌，然后将应用导航到您的主屏幕。
如果未收到令牌，请将应用导航至登录屏幕。

Answer 2

but I can't seem to find a way to keep the user logged in inside the app. everytime it restarts the user needs to login again.

JS 库应该已经检测到来自 AsyncStorage 的用户会话并自动恢复它。您可以在 Auth 库中看到此逻辑：

来自构造函数的调用：https://github.com/supabase/gotrue-js/blob/8d7eef85a41c5e94a1336f0f44eacc5253186e9b/src/GoTrueClient.ts#L106-L107

调用这个函数：https://github.com/supabase/gotrue-js/blob/8d7eef85a41c5e94a1336f0f44eacc5253186e9b/src/GoTrueClient.ts#L637

您应该能够只添加一个侦听器 (supabase.auth.onAuthStateChange())，它会在库刷新会话后被触发。您可以在 useEffect 中添加侦听器（就像上面所做的那样），但没有 [user] 参数以便立即设置它。

Answer 3

确保使用 AsyncStorage 和以下选项实例化 supabase 客户端：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage as any,
  autoRefreshToken: true,
  persistSession: true,
  detectSessionInUrl: false,
});

在本机反应中使用 supabase 时保持用户登录

keep user logged in while using supabase in react native

react-native

supabase