React应用中supabase.auth.session is not a function错误求助

问题代码 #

import React, { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';

// 注意：此处URL和密钥为示例值，需替换为真实Supabase项目信息
const supabase = createClient('httpsfwefwfwfwf', 'wfw');

function App() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const session = supabase.auth.session();
        setUser(session ? session.user : null);

        const { data: authListener } = supabase.auth.onAuthStateChange(
            async (event, session) => {
                setUser(session ? session.user : null);
            }
        );

        return () => {
            authListener.unsubscribe();
        };
    }, []);

    async function handleLogin() {
        const { error } = await supabase.auth.signIn({ provider: 'google' });
        if (error) {
            console.error('Error logging in:', error);
        }
    }

    async function handleLogout() {
        const { error } = await supabase.auth.signOut();
        if (error) {
            console.error('Error logging out:', error);
        }
    }

    return (
        <div>
            <button onClick={handleLogin} style={{display: user ? 'none' : 'block'}}>Login with Google</button>
            <button onClick={handleLogout} style={{display: user ? 'block' : 'none'}}>Logout</button>
            {user && <div><p>Email: {user.email}</p></div>}
        </div>
    );
}

export default App;

错误日志 #

Uncaught TypeError: supabase.auth.session is not a function
    at App.js:10:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
    at commitPassiveMountEffects (react-dom.development.js:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)
    at react-dom.development.js:26769:1
    at workLoop (scheduler.development.js:266:1)

解决方案 #

1. 替换废弃的session()方法 #

Supabase JS SDK v2+移除了同步的supabase.auth.session()，改用异步的getSession()方法。需要修改useEffect中的初始化逻辑：

将原来的同步获取会话代码替换为异步获取，并调整useEffect的结构以支持异步操作：

useEffect(() => {
    // 异步获取初始会话
    const fetchInitialSession = async () => {
        const { data: { session } } = await supabase.auth.getSession();
        setUser(session?.user ?? null);
    };
    fetchInitialSession();

    // 监听认证状态变化逻辑保持不变
    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
        setUser(session?.user ?? null);
    });

    return () => {
        authListener.unsubscribe();
    };
}, []);

2. 替换真实的Supabase项目信息 #

当前代码中使用的Supabase URL和密钥是无效的示例值，必须替换为你在Supabase控制台中获取的项目URL和anon公钥，否则后续登录功能会失败。

3. 可选：简化状态赋值逻辑 #

使用可选链运算符?.和空值合并运算符??可以让代码更简洁，替代原有的三元判断逻辑。

修复后完整代码 #

import React, { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';

// 替换为你的Supabase项目URL和anon密钥
const supabase = createClient('https://your-project-url.supabase.co', 'your-anon-key');

function App() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const fetchInitialSession = async () => {
            const { data: { session } } = await supabase.auth.getSession();
            setUser(session?.user ?? null);
        };
        fetchInitialSession();

        const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
            setUser(session?.user ?? null);
        });

        return () => authListener.unsubscribe();
    }, []);

    async function handleLogin() {
        const { error } = await supabase.auth.signIn({ provider: 'google' });
        if (error) console.error('Error logging in:', error);
    }

    async function handleLogout() {
        const { error } = await supabase.auth.signOut();
        if (error) console.error('Error logging out:', error);
    }

    return (
        <div>
            <button onClick={handleLogin} style={{ display: user ? 'none' : 'block' }}>Login with Google</button>
            <button onClick={handleLogout} style={{ display: user ? 'block' : 'none' }}>Logout</button>
            {user && <div><p>Email: {user.email}</p></div>}
        </div>
    );
}

export default App;

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