添加自动前缀后，社交登录（nextauth）无法使用

Posted 2023-03-06

【中文标题】添加自动前缀后，社交登录（nextauth）无法使用

【英文标题】：social login (nextauth) isn't working with after i add autoprefixer

【发布时间】：2021-11-26 04:54:58

【问题描述】：

有谁知道这意味着什么，以及我该如何调试它——我已经尝试过 react 开发工具——一旦弹出这条消息，状态和一切都会消失：

Server Error
TypeError: Cannot destructure property 'id' of 'undefined' as it is undefined.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///home/abda_react/abdn2/node_modules/next-auth/server/lib/providers.js (29:5)
Array.find
<anonymous>
parseProviders
file:///home/abda_react/abdn2/node_modules/next-auth/server/lib/providers.js (28:30)
NextAuthHandler
file:///home/abda_react/abdn2/node_modules/next-auth/server/index.js (88:30)
<unknown>
file:///home/abda_react/abdn2/node_modules/next-auth/server/index.js (251:38)
Object.apiResolver
file:///home/abda_react/abdn2/node_modules/next/dist/server/api-utils.js (101:15)
runMicrotasks
<anonymous>
processTicksAndRejections
node:internal/process/task_queues (96:5)
async DevServer.handleApiRequest
file:///home/abda_react/abdn2/node_modules/next/dist/server/next-server.js (770:9)
async Object.fn
file:///home/abda_react/abdn2/node_modules/next/dist/server/next-server.js (661:37)

我的 nextauth 配置文件：

import NextAuth from "next-auth"
import EmailProvider from 'next-auth/providers/email';
import GoogleProvider from "next-auth/providers/google";

export default NextAuth(
  // Configure one or more authentication providers
  providers: [
    ,EmailProvider(
        server: process.env.EMAIL_SERVER,
        from: process.env.EMAIL_FROM,
    )
    ,GoogleProvider(
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    ),
    // ...add more providers here
    
  ],
  jwt: 
    encryption: true,
  ,
  secret: process.env.secret,
  //https://www.youtube.com/watch?v=QK24lEvRTI8
  callback: 
    // async jwt(token, account) 
    //   if (account?.accessToken) 
    //     token.accessToken = account.accessToken;
    //   
    //   return token;
    // ,
    // redirect: async (url, _baseUrl) => 
    //   if (url === '/') 
    //     return Promise.resolve('/index');
    //   
    //   return Promise.resolve('/index');
    // 
  ,

  pages: 
    // signIn: '/auth/signin',
    // signOut: '/auth/signout',
    // error: '/auth/error', // Error code passed in query string as ?error=
    // verifyRequest: '/auth/verify-request', // (used for check email message)
    // newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
  
)

// https://console.cloud.google.com/projectselector2/apis/credentials?authuser=1&pli=1&supportedpurview=project
//All requests to /api/auth/* (signIn, callback, signOut, etc.) will automatically be handled by NextAuth.js.

可能是配置错误？但我不明白为什么在我安装自动前缀之前它会起作用......

这里是提供者文件（我没有写一个代码）：

"use strict";

Object.defineProperty(exports, "__esModule", 
  value: true
);
exports.default = parseProviders;

var _merge = require("../../lib/merge");

function parseProviders(params) 
  const 
    base,
    providerId
   = params;
  const providers = params.providers.map((
    options,
    ...rest
  ) => 
    var _userOptions$id, _userOptions$id2;

    const defaultOptions = normalizeProvider(rest);
    const userOptions = normalizeProvider(options);
    return (0, _merge.merge)(defaultOptions,  ...userOptions,
      signinUrl: `$base/signin/$(_userOptions$id = userOptions === null || userOptions === void 0 ? void 0 : userOptions.id) !== null && _userOptions$id !== void 0 ? _userOptions$id : rest.id`,
      callbackUrl: `$base/callback/$(_userOptions$id2 = userOptions === null || userOptions === void 0 ? void 0 : userOptions.id) !== null && _userOptions$id2 !== void 0 ? _userOptions$id2 : rest.id`
    );
  );
  const provider = providers.find((
    id
  ) => id === providerId);
  return 
    providers,
    provider
  ;


function normalizeProvider(provider) 
  var _provider$version;

  if (!provider) return;
  const normalizedProvider = Object.entries(provider).reduce((acc, [key, value]) => 
    if (["authorization", "token", "userinfo"].includes(key) && typeof value === "string") 
      var _url$searchParams;

      const url = new URL(value);
      acc[key] = 
        url: `$url.origin$url.pathname`,
        params: Object.fromEntries((_url$searchParams = url.searchParams) !== null && _url$searchParams !== void 0 ? _url$searchParams : [])
      ;
     else 
      acc[key] = value;
    

    return acc;
  , );

  if (provider.type === "oauth" && !((_provider$version = provider.version) !== null && _provider$version !== void 0 && _provider$version.startsWith("1.")) && !provider.checks) 
    normalizedProvider.checks = ["state"];
  

  return normalizedProvider;

所以..根据我的猜测，那里没有属性 id...但我不知道为什么在安装 autoprefixer 后会改变，而且我什至不知道如何考虑将 id 添加到其中。

更新

changed the providers variable to see maybe it's just google...and it seems i have another issue which i think might be related.  here is the error:

./pages/api/auth/[...nextauth].js:3:0
Module not found: Package path ./providers is not exported from package /home/abda_react/abdn2/node_modules/next-auth (see exports field in /home/abda_react/abdn2/node_modules/next-auth/package.json)
  1 | import NextAuth from "next-auth"
  2 | import EmailProvider from 'next-auth/providers/email';
> 3 | import Providers from "next-auth/providers";
  4 | 
  5 | export default NextAuth(
  6 |   // Configure one or more authentication providers

Import trace for requested module:

https://nextjs.org/docs/messages/module-not-found

这是我改变的：

import NextAuth from "next-auth"
import EmailProvider from 'next-auth/providers/email';
import Providers from "next-auth/providers";

export default NextAuth(
  // Configure one or more authentication providers
  providers: [
    // ,EmailProvider(
    //     server: process.env.EMAIL_SERVER,
    //     from: process.env.EMAIL_FROM,
    // )
    ,Providers.Google(
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    ),
    // ...add more providers here

package.json：

  "exports": 
    ".": "./index.js",
    "./jwt": "./jwt/index.js",
    "./react": "./react/index.js",
    "./providers/*": "./providers/*.js"
  ,

【问题讨论】：

似乎userOptions.id 出现在Property 'id' does not exist on type ''.ts(2339) 但我真的不知道从哪里开始

【参考方案1】：

好的两件事：

我的电子邮件提供商凭据是占位符 - 这不好。 您的登录页面需要设置

为了完成，这就是我所做的：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google";

export default NextAuth(
  // Configure one or more authentication providers
  providers: [
    GoogleProvider(
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    ),
  ]

  ,callback: 
    async jwt(token, account) 
      if (account?.accessToken) 
        token.accessToken = account.accessToken;
      
      return token;
    ,
    redirect: async (url, _baseUrl) => 
      if (url === '/') 
        return Promise.resolve('/index');
      
      return Promise.resolve('/index');
    

  ,pages: 
    signIn: '/index',
    signOut: '/index',

  
  ,debug: false

)

即使我仍然无法导入所有提供程序 - 它可以工作，现在已经足够好了

但又一次......不知道为什么它在自动前缀之前工作......