4

我正在尝试实现 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>并且 auth 可以正常工作，因此它似乎已专门缩小到该signIn()功能。什么会导致响应返回空值？

4

1 回答 1

0

发生这种情况是因为在从 OAuth 服务器进行重定向之后才会填充这些值。如果您查看supbase/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 魔法，您将可以访问会话、用户等数据
于 2021-09-15T13:46:19.570 回答