Supabase 第三方 oAuth 提供商返回 null？

Question

我正在尝试实现 Facebook、Google 和 Twitter 身份验证。到目前为止，我已经在各自的开发人员平台中设置了应用程序，将这些 key / secret 添加到了我的 Supabase 控制台，并创建了这个 graphql 解析器:

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import camelcaseKeys from 'camelcase-keys';
import { supabase } from 'lib/supabaseClient';
import { LoginInput, Provider } from 'generated/types';
import { Provider as SupabaseProvider } from '@supabase/supabase-js';
import Context from '../../context';
import { User } from '@supabase/supabase-js';

export default async function login(
  _: any,
  { input }: { input: LoginInput },
  { res, req }: Context
): Promise<any> {
  const { provider } = input;

  // base level error object
  const errorObject = {
    __typename: 'AuthError',
  };

  // return error object if no provider is given
  if (!provider) {
    return {
      ...errorObject,
      message: 'Must include provider',
    };
  }

  try {
    const { user, session, error } = await supabase.auth.signIn({
      // provider can be 'github', 'google', 'gitlab', or 'bitbucket'
      provider: 'facebook',
    });
    console.log({ user });
    console.log({ session });
    console.log({ error });

    if (error) {
      return {
        ...errorObject,
        message: error.message,
      };
    }

    const response = camelcaseKeys(user as User, { deep: true });
    return {
      __typename: 'LoginSuccess',
      accessToken: session?.access_token,
      refreshToken: session?.refresh_token,
      ...response,
    };
  } catch (error) {
    return {
      ...errorObject,
      message: error.message,
    };
  }
}

我在 signIn() 正下方设置了三个控制台日志函数，所有这些都返回 null。
我也可以直接去 https://<your-ref>.supabase.co/auth/v1/authorize?provider=<provider>并且 auth 工作正常，因此它似乎已专门缩小到 signIn()功能。什么会导致响应返回空值？

Answer 1

之所以发生这种情况，是因为这些值直到从 OAuth 服务器进行重定向后才会填充。如果看supabase/gotrue-js的内码你会看到null被明确返回。

  private _handleProviderSignIn(
    provider: Provider,
    options: {
      redirectTo?: string
      scopes?: string
    } = {}
  ) {
    const url: string = this.api.getUrlForProvider(provider, {
      redirectTo: options.redirectTo,
      scopes: options.scopes,
    })

    try {
      // try to open on the browser
      if (isBrowser()) {
        window.location.href = url
      }
      return { provider, url, data: null, session: null, user: null, error: null }
    } catch (error) {
      // fallback to returning the URL
      if (!!url) return { provider, url, data: null, session: null, user: null, error: null }
      return { data: null, user: null, session: null, error }
    }
  }

流程是这样的:

调用 `supabase.auth.signIn({ provider: 'github' })

用户被发送到 Github.com，在那里他们将被提示允许/拒绝您的应用访问他们的数据

如果他们允许您的应用访问，Github.com 将重定向回您的应用

现在，通过一些 Supabase 魔法，您将可以访问 session 、用户等数据