Supabase+Google API：useSession()返回null的问题及替代方案

useSession() 是否仍有效？ #

Supabase Auth 的 useSession() 钩子目前（2024年）仍然有效，但仅能在 SupabaseProvider 包裹的组件范围内使用，且需确保依赖包版本为稳定版。

替代方案及问题排查步骤 #

1. 先排查基础配置问题 #

• 确认根组件已被 <SupabaseProvider client={supabase}> 完整包裹，useSession() 必须在 Provider 作用域内才能读取会话。
• 检查 Supabase 客户端初始化代码，确保 API_URL 和 ANON_KEY 与 Supabase 控制台的配置一致：

  import { createClient } from '@supabase/supabase-js';
  const supabase = createClient('YOUR_API_URL', 'YOUR_ANON_KEY');
  

2. 手动获取会话的替代方法 #

方法一：异步获取当前会话

使用 supabase.auth.getSession() 手动拉取会话，适合在组件挂载时初始化：

import { useEffect, useState } from 'react';
import supabase from '../path-to-your-supabase-client';

function YourComponent() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const fetchSession = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      setSession(session);
    };
    fetchSession();
  }, []);

  // 后续使用 session 变量
  return <div>{session ? '已登录' : '未登录'}</div>;
}

方法二：监听会话状态变化

通过 supabase.auth.onAuthStateChange 实时监听登录/登出事件，适合需要响应会话变更的场景：

import { useEffect, useState } from 'react';
import supabase from '../path-to-your-supabase-client';

function YourComponent() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const subscription = supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
      // 可根据 event 处理不同状态：如 SIGNED_IN、SIGNED_OUT 等
    });

    // 组件卸载时取消订阅
    return () => subscription.unsubscribe();
  }, []);

  return <div>{session ? '已登录' : '未登录'}</div>;
}

3. 处理URL中的Access Token #

URL中存在access token但会话未创建，可能是未触发Supabase的会话交换流程：

• 确保你使用的是Supabase官方的OAuth登录方法：supabase.auth.signInWithOAuth({ provider: 'google' })，而非手动对接Google Calendar API的授权流程。
• 如果是自定义OAuth流程，需调用 supabase.auth.exchangeCodeForSession() 把授权码转换成Supabase会话：

  const { data, error } = await supabase.auth.exchangeCodeForSession(window.location.search);
  

4. 检查依赖版本 #

旧版本依赖可能存在钩子bug，尝试更新到最新稳定版：

npm update @supabase/supabase-js @supabase/auth-ui-react

内容的提问来源于stack exchange，提问作者Johann