Supabase 第三方 oAuth 提供者返回 null？答案

【问题标题】：Supabase third party oAuth providers are returning null?Supabase 第三方 oAuth 提供者返回 null？
【发布时间】：2021-09-20 17:34:05
【问题描述】：

我正在尝试实现 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() 函数下直接设置了三个控制台日志，所有这些日志都返回空值。

我也可以直接转到https://<your-ref>.supabase.co/auth/v1/authorize?provider=<provider> 并且身份验证正常工作，因此它似乎已专门缩小到signIn() 功能。什么会导致响应返回空值？

【问题讨论】：

标签： supabase

【解决方案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 魔法，您将可以访问会话、用户等数据

【讨论】：