无法让Next Auth Jwt和会话回调工作，我正在尝试设置一个jwt，它将存储在会话上，以及一个额外的feild。
无法让Next Auth Jwt和会话回调工作，我正在尝试设置一个jwt，它将存储在会话上，以及一个额外的feild。
提问于 2022-11-17 19:45:37
问题
我想建立jwt公司。具体来说，我希望有一个可以从后端请求访问的jwt。我还想在本届会议上增加一个字段。我花了几个小时试图设置一些非常标准的身份验证，我不知道我是笨了还是例子不清楚。在这一点上，任何帮助都是一种祝福，所以提前感谢任何尝试和帮助的人。
错误信息：
在调试过程中，我要么得到jwt必需的值，要么缺少checks.state参数。
在auth选项中，我还得到了一个类型错误，说明如下：
'session.strategy‘的类型在这些类型之间不兼容。类型'string‘不能分配到键入'SessionStrategy \未定’。
但是文档清楚地表明它应该是我们传递的字符串。
下面是我传递给下一个auth的authOptions对象：
export const authOptions = {
// Configure one or more authentication providers
providers: [
EmailProvider({
server: {
host: config.authProviders.email.host,
port: config.authProviders.email.port,
auth: {
user: config.authProviders.email.user,
pass: config.authProviders.email.password,
}
},
from: config.authProviders.email.from,
}),
GoogleProvider({
clientId: config.authProviders.google.id ? config.authProviders.google.id : "",
clientSecret: config.authProviders.google.secret ? config.authProviders.google.secret : "",
}),
FacebookProvider({
clientId: config.authProviders.facebook.id ? config.authProviders.facebook.id : "",
clientSecret: config.authProviders.facebook.secret ? config.authProviders.facebook.secret : "",
}),
],
adapter: MongoDBAdapter(clientPromise),
secret: process.env.NEXTAUTH_SECRET,
pages: {
signIn: '/login/signin',
signOut: '/',
},
session: {
strategy: "jwt",
},
jwt: {
maxAge: 30 * 24 * 60 * 60, // 30 days
// async encode({ token, secret }: { token: typeof JWT; secret: string }) {
// const jwt = require("jsonwebtoken");
// const encodedToken = jwt.sign(token, secret);
// return encodedToken;
// },
// async decode({ token, secret }: { token: typeof JWT; secret: string }) {
// const jwt = require("jsonwebtoken");
// const decodedToken = jwt.verify(token, secret);
// return decodedToken;
// },
async encode() { },
async decode() { },
},
// This is for jwt stuff?
callbacks: {
async signIn({ user, account, profile, email, credentials }: { user: Object; account: Object; profile: Object; email: Object; credentials: Object }) {
return true
},
async redirect({ url, baseUrl }: { url: string; baseUrl: string }) {
return baseUrl
},
async jwt({ token, account, profile, session }: any) {
console.log({ jwt: { token, account, profile, session } })
return token
},
async session({ session, token, user }: any) {
console.log({ sessionEx: { session, token, user } });
return session;
},
},
}
export default NextAuth(authOptions)如何繁殖
代码沙箱链接https://codesandbox.io/s/adoring-galois-1ftd3n
请注意，我没有添加env变量，您可以只设置一个提供程序，这个应该重新创建问题。我修改的唯一文件是下一个四月，我做了一个自定义的登录路由。
使用以下配置创建下一个auth文件：
export const authOptions = {
// Configure one or more authentication providers
providers: [
EmailProvider({
server: {
host: config.authProviders.email.host,
port: config.authProviders.email.port,
auth: {
user: config.authProviders.email.user,
pass: config.authProviders.email.password,
}
},
from: config.authProviders.email.from,
}),
GoogleProvider({
clientId: config.authProviders.google.id ? config.authProviders.google.id : "",
clientSecret: config.authProviders.google.secret ? config.authProviders.google.secret : "",
}),
FacebookProvider({
clientId: config.authProviders.facebook.id ? config.authProviders.facebook.id : "",
clientSecret: config.authProviders.facebook.secret ? config.authProviders.facebook.secret : "",
}),
],
adapter: MongoDBAdapter(clientPromise),
secret: process.env.NEXTAUTH_SECRET,
pages: {
signIn: '/login/signin',
signOut: '/',
},
session: {
strategy: "jwt",
},
jwt: {
maxAge: 30 * 24 * 60 * 60, // 30 days
// async encode({ token, secret }: { token: typeof JWT; secret: string }) {
// const jwt = require("jsonwebtoken");
// const encodedToken = jwt.sign(token, secret);
// return encodedToken;
// },
// async decode({ token, secret }: { token: typeof JWT; secret: string }) {
// const jwt = require("jsonwebtoken");
// const decodedToken = jwt.verify(token, secret);
// return decodedToken;
// },
async encode() { },
async decode() { },
},
// This is for jwt stuff?
callbacks: {
async signIn({ user, account, profile, email, credentials }: { user: Object; account: Object; profile: Object; email: Object; credentials: Object }) {
return true
},
async redirect({ url, baseUrl }: { url: string; baseUrl: string }) {
return baseUrl
},
async jwt({ token, account, profile, session }: any) {
console.log({ jwt: { token, account, profile, session } })
return token
},
async session({ session, token, user }: any) {
console.log({ sessionEx: { session, token, user } });
return session;
},
},
}at登录/签名
import { signIn, useSession, signOut } from 'next-auth/react'
import { useState, } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { BsGoogle, BsFacebook } from 'react-icons/bs';
interface Props {
}
const SignInForm: React.FC<Props> = () => {
const [email, setEmail] = useState('');
const { data: session, status } = useSession();
console.log({ session, status });
const providers = [
{
name: 'Google',
Icon: BsGoogle,
},
{
name: 'Facebook',
Icon: BsFacebook,
},
]
const handleSignIn = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault();
await signIn('email', { email, })
// push(asPath)
}
const handleAuthSignIn = async (name: string) => {
// make name all lowercase
name = name.toLowerCase();
await signIn(name)
}
if (!session) {
return (
<div className='relative bg-white border-2 border-black rounded-md '>
{/* <div className='relative border-8 rounded-md bg-myDarkBlue border-myDarkRed '> */}
<form className="py-5 px-7">
<div className="mb-4">
<input
className="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none outline-1 focus:outline-myRed focus:shadow-outline"
id="email" type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
</div>
<div className="flex items-center justify-between mb-3">
<button
className="px-4 py-2 font-bold text-white rounded bg-myGreen hover:bg-green-700 focus:outline-none focus:shadow-outline"
type="button" onClick={(e) => { handleSignIn(e) }}>
Sign In
</button>
<a className="inline-block text-sm font-bold align-baseline text-myBlue hover:text-myDarkBlue"
href="#">
Need Help?
</a>
</div>
<div className="grid grid-flow-row grid-row">
{providers.map(({ name, Icon }, index) => {
return (
<div key={`${name} ${index}`} className='flex justify-start p-3 my-1 bg-white border rounded hover:border-myRed hover:cursor-pointer' onClick={() => { handleAuthSignIn(name) }}>
<Icon className='m-3 ' />
<p className='m-3 text-base '>Login with {name}</p>
</div>)
})}
</div>
</form>
</div>
)
} else {
return (
<div className=' bg-slate-300'>
<Link href='/'>
<p className='text-xl text-center align-middle'>You are already signed in silly <span className='text-myBlue hover:text-myDarkBlue'>click to go Home</span></p>
</Link>
<div className='cursor-pointer text-myBlue hover:text-myDarkBlue' onClick={() => signOut({ callbackUrl: 'http://localhost:3000/' })}>Or sign out</div>
</div>
)
}
}
export default SignInForm;回答 1
Stack Overflow用户
发布于 2022-11-30 12:26:36
解决办法：
问题是，我将默认行为和自定义行为混合在一起，下面您将看到对我有用的最终代码。
export const authOptions: NextAuthOptions = {
// Configure one or more authentication providers
providers: [
EmailProvider({
server: {
host: config.authProviders.email.host,
port: config.authProviders.email.port,
auth: {
user: config.authProviders.email.user,
pass: config.authProviders.email.password,
}
},
from: config.authProviders.email.from,
}),
GoogleProvider({
clientId: config.authProviders.google.id ? config.authProviders.google.id : "",
clientSecret: config.authProviders.google.secret ? config.authProviders.google.secret : "",
}),
FacebookProvider({
clientId: config.authProviders.facebook.id ? config.authProviders.facebook.id : "",
clientSecret: config.authProviders.facebook.secret ? config.authProviders.facebook.secret : "",
}),
],
adapter: MongoDBAdapter(clientPromise),
secret: process.env.NEXTAUTH_SECRET,
// defining custom login page
pages: {
signIn: '/login/signin',
// signOut: '/',
},
session: {
strategy: "jwt",
},
jwt: {
// if you definde the env variable you don't need to define the secret here
// secret: process.env.NEXTAUTH_SECRET,
maxAge: 30 * 24 * 60 * 60, // 30 days
// You only need the below if you are custom signing your JWTs
// async encode({ token, secret }: { token: typeof JWT; secret: string }) {
// const jwt = require("jsonwebtoken");
// const encodedToken = jwt.sign(token, secret);
// return encodedToken;
// },
// async decode({ token, secret }: { token: typeof JWT; secret: string }) {
// const jwt = require("jsonwebtoken");
// const decodedToken = jwt.verify(token, secret);
// return decodedToken;
// },
},
callbacks: {
// async signIn({ user, account, profile, email, credentials }: { user: Object; account: Object; profile: Object; email: Object; credentials: Object }) {
// return true
// },
// async redirect({ url, baseUrl }: { url: string; baseUrl: string }) {
// return baseUrl
// },
async jwt({ token, account, profile, session }: any) {
return token
},
async session({ session, token, user }) {
const dbUser = await dbQueries.getUserById(new ObjectId(token.sub));
dbUser?.availableWeights ? session.user.availableWeights = dbUser.availableWeights : session.user.availableWeights = [];
return session
},
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74481270
复制相关文章
相似问题
腾讯云开发者
