Next-Auth with Provider.Credentials：当 API 已经返回 JWT 令牌时如何实现？

Question

• 我有一个 NextJS 页面，我尝试在其中实施 Next-Auth。
• 我使用凭据登录我的 Rails API。
• 我的 API 正在返回（已经）一个 JWT-Token。 （所以 NextAuth 不能创建它）

在这种情况下如何为[...nextauth].js 实现Provider.Credentials？

流程“图表” Next request ---> Next API (with Next-Auth) ---> Rails API (returning Token)

目前我有这些options：

 providers: [
    CredentialsProvider({
      name: 'Email',
      credentials: {
        email: { label: "Email", type: "email", placeholder: "meine.email@domain.com" },
        password: {  label: "Passwort", type: "password" }
      },
      async authorize(credentials) {

        // The 'url' is pointing to a Rails API endpoint which returns a JWT Token
        const url = `${process.env.NEXT_PUBLIC_API_URL}/auth/login`;

        const res = await fetch(url, {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: {
            "Content-Type": "application/json" }
        })
        const user = await res.json()

        // If no error and we have user data, return it
        if (res.ok && user) {
          // I SAW EXAMPLES RETURNING {"email": "blah@tst.com"}
          return user // MY CONTENT {token: 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo0LCJyb2xl…0.OAGiwjj9O_NsH02lIjA2D4HYZkmTQ3_SqtKcVgaIul0'}

        }
        // Return null if user data could not be retrieved
        return null
      }
    })
  ]
}

在浏览器中设置了 session_token，但该内容是我没有设置的（随机的？）。如果不是我的令牌，这些内容是从哪里来的？

我的 Rails API 令牌内容：

{
  "user_id": 4,
  "roles": [
    "user"
  ],
  "exp": 1631096219
}

Next-Auth API 令牌内容：

{
  "iat": 1631009819,
  "exp": 1633601819
}

我是否必须解码我的 API 令牌并在 Provider.Credentials 函数中重新组合？

我实施 Next-Auth 以提供更多的身份验证，例如 Twitter 和 Co，但也使用“useSession”而不是构建我自己的所有东西（不会重新发明轮子）。

Answer 1

添加回调。

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Email",
      credentials: {
        email: {
          label: "Email",
          type: "email",
          placeholder: "meine.email@domain.com",
        },
        password: { label: "Passwort", type: "password" },
      },
      async authorize(credentials) {
        // The 'url' is pointing to a Rails API endpoint which returns a JWT Token
        const url = `${process.env.NEXT_PUBLIC_API_URL}/auth/login`;

        const res = await fetch(url, {
          method: "POST",
          body: JSON.stringify(credentials),
          headers: {
            "Content-Type": "application/json",
          },
        });
        const user = await res.json();

        // If no error and we have user data, return it
        if (res.ok && user) {
          // I SAW EXAMPLES RETURNING {"email": "blah@tst.com"}
          return user; // MY CONTENT {token: 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo0LCJyb2xl…0.OAGiwjj9O_NsH02lIjA2D4HYZkmTQ3_SqtKcVgaIul0'}
        }
        // Return null if user data could not be retrieved
        return null;
      },
    }),
  ],

  callbacks: {
    async jwt({ token, user, account, isNewUser }) {// This user return by provider {} as you mentioned above MY CONTENT {token:}
      if (user) {
        if (user.token) {
          token = { accessToken: user.token };
        }
      }
      return token;
    },

    // That token store in session
    async session({ session, token }) { // this token return above jwt()
      session.accessToken = token.accessToken;
      //if you want to add user details info
      session.user = { name: "name", email: "email" };//this user info get via API call or decode token. Anything you want you can add
      return session;
    },
  },
});

Answer 2

因此，您从凭据 authorize 函数返回的用户将存储在 JWT（JSON Web 令牌 - 与所有经过身份验证的请求一起传递）中，这是一个散列/编码（默认情况下未加密！）版本对象。

您可以使用https://jwt.io 来调试并查看您的 JWT 中的内容。您将eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjo0LCJyb2xl... 值粘贴到该站点的调试器字段中，它会显示{ iat: 49835898: sub: 47897: email: 'abc@xyz.com' } 等值。

如果您的 rails API 在 authorize 函数的 fetch 调用中向您返回 JWT，您可以使用类似 jwt-decode 的库在此处对其进行解码，并从中附加您想要的任何值在您的应用程序中“持久化”到您从 next-auth 中的 authorize 函数返回的用户对象。