Need help in adding the credentials provider from next-auth in Nextacular #33
Replies: 4 comments 2 replies
-
How did you insert the Nextauth secret in your env file? The below is wrong. It contains comment in the same line. It should be like this:
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
You can try the below: // api/auth/[...nextauth].ts
import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
const authOptions: NextAuthOptions = {
session: {
strategy: "jwt",
},
providers: [
CredentialsProvider({
type: "credentials",
credentials: {},
authorize(credentials, req) {
const { email, password } = credentials as {
email: string;
password: string;
};
// perform you login logic
// find out the user from DB
if (email !== "john@gmail.com" || password !== "1234") {
throw new Error("invalid credentials");
}
// if everything is fine
return {
id: "1234",
name: "John Doe",
email: "john@gmail.com",
role: "admin",
};
},
}),
],
pages: {
signIn: "/auth/signin",
// error: '/auth/error',
// signOut: '/auth/signout'
},
callbacks: {
jwt(params) {
// update token
if (params.user?.role) {
params.token.role = params.user.role;
}
// return final_token
return params.token;
},
},
};
export default NextAuth(authOptions); And the signin component, import { NextPage } from "next";
import { signIn } from "next-auth/react";
import { FormEventHandler, useState } from "react";
interface Props {}
const SignIn: NextPage = (props): JSX.Element => {
const [userInfo, setUserInfo] = useState({ email: "", password: "" });
const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
// validate your userinfo
e.preventDefault();
const res = await signIn("credentials", {
email: userInfo.email,
password: userInfo.password,
redirect: false,
});
console.log(res);
};
return (
<div className="sign-in-form">
<form onSubmit={handleSubmit}>
<h1>Login</h1>
<input
value={userInfo.email}
onChange={({ target }) =>
setUserInfo({ ...userInfo, email: target.value })
}
type="email"
placeholder="john@email.com"
/>
<input
value={userInfo.password}
onChange={({ target }) =>
setUserInfo({ ...userInfo, password: target.value })
}
type="password"
placeholder="********"
/>
<input type="submit" value="Login" />
</form>
</div>
);
};
export default SignIn; |
Beta Was this translation helpful? Give feedback.
-
Can we perform user authentication for sub websites as well? |
Beta Was this translation helpful? Give feedback.
-
ok so I have been banging my head against the wall for 4 days now and I'm failing to use the Credentials Provider of Next-Auth in nextacular. I have made that work on other small test demos but failed to do so on Nextacular. Even after inserting the correct credentials, the useSession returns unauthorized.
did someone else face that issue? or did someone manage to make that work, please let me know? Need help.
Beta Was this translation helpful? Give feedback.
All reactions