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

Question

我正在尝试实现 Facebook、Google 和 Twitter 身份验证。到目前为止，我已经在各自的开发者平台中设置了应用程序，将这些密钥/秘密添加到我的 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>并且身份验证工作正常，因此它似乎已专门缩小到该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 }
    }
  }

流程是这样的：

1. 调用`supabase.auth.signIn({provider:'github'})
2. 用户被发送到 Github.com，系统将提示他们允许/拒绝您的应用程序访问其数据
3. 如果他们允许您的应用程序访问，Github.com 会重定向回您的应用程序
4. 现在，通过一些 Supabase 魔法，您将可以访问会话、用户等数据