所有的auth-wise都工作的很好。我甚至有一个加载状态设置,这样加载器会一直显示直到状态改变,但是我在重新加载的时候还是会出现这种 Flink 。这种 Flink 只发生在Supabase上。我之前用的是Firebase版本,它和我的代码配合得很好。
下面是一段视频供参考:https://imgur.com/a/5hywXj5
编辑:将代码更新为当前版本
export default function Navigation() {
const { user, setUser } = useContext(AuthenticatedUserContext);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const session = supabase.auth.session();
setUser(session?.user ?? null);
const { data: listener } = supabase.auth.onAuthStateChange((_: any, session: any) => {
setUser(session?.user ?? null);
});
setIsLoading(false);
return () => {
listener?.unsubscribe();
};
}, []);
if (isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator color={Theme.colors.purple} size="large" />
</View>
);
}
return (
<NavigationContainer linking={LinkingConfiguration}>{user ? <AppStack /> : <AuthStack />}</NavigationContainer>
);
}
3条答案
按热度按时间tuwxkamq1#
好的,自从我第一次问这个问题以来,Supabase已经发布了一些更新。下面是我现在如何在加载应用程序时停止 Flink 。
首先,我们需要为我们的应用程序设置AuthContext。确保用
<AuthContextProvider>
Package 您的App.tsx
。AuthContext.tsx
现在,如果您像我一样使用React Navigation,我们需要检查是否有有效用户将其发送到登录的主屏幕。
Navigation.tsx
px9o7tmv2#
为其他人重述一下,
onAuthStateChange
不会在第一次页面加载时执行,因此您使用getUserAuthStatus
异步函数触发它。但是session()
函数不是异步的,如果没有用户会话,它将立即返回null
结果,或者返回已存储在localStorage
中的会话。在这种情况下,
getUserAuthStatus
的结果将始终返回null,然后onAuthStateChange
将触发SIGNED_IN
事件和一个会话,该会话将设置用户。此外,
onAuthStateChange
函数应该在执行会话步骤之前注册,以便捕获任何触发的事件。在当前表单中,事件可以在session()
调用之后但在注册处理程序之前直接触发。因此,概括渲染步骤如下:
步骤1
步骤2
步骤3
据我所知,直接使用session而不考虑它是异步的就可以了。
wfsdck303#
现在React / Next Auth helper提供了不错的帮助,所以你不需要编写自己的
useUser
或useSession
:https://supabase.com/docs/guides/auth/auth-helpers