I’m new to Next Js. Please help me to solve this. I’ve been trying to authenticate my OTP using Next Auth. But I don’t know how to pass the values from component to […nextauth].js
Used signIn property in a function that gets called when I give a right OTP.
function signInHandler() {
signIn();
router.push('/')
}
My UI where I have the input box and Login Button
const detail = {
title: (
<div style={{ width: "100%" }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<h3 onClick={callApi}>OTP Verification</h3>
<div onClick={() => setOtpModal(false)}>X</div>
</div>
<div style={{ width: "100%" }}>
<SmallText style={"text"}>OTP</SmallText>
</div>
</div>
),
body: (
<div style={{ textAlign: "left", width: "100%" }}>
<div style={{ marginTop: "10px", textAlign: "left", display: "flex" }}>
<div>
<SmallText style={styles.stylesheet.text}>
{validity && " Did not receive OTP ?"}
{!validity && (
<div style={{ display: "flex" }}>
<div style={{ display: "flex" }}>
<Warning /> <div style={{"margin":"0px 0px 0px 10px"}} >OTP seems to be invalid</div>
</div>
</div>
)}
</SmallText>
</div>
<div>
<SmallText style={"glow"}>Resend OTP</SmallText>
</div>
</div>
Called the SignInHandler function here to login using “signIn()” in this Button.
<button style={styles.stylesheet.btnStyle} onClick={signInHandler}>
Login !
</button>
My current […nextauth].js
import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import axios from "axios"
import { API_URL } from "./../../../helpers/api/mutations"
import OtpVerification from './../../../components/Components/SignIn/OtpVerification';
This is the place I got stuck. I’m trying to give my API call here with “SignIn” from OTP Verification Component. I want to replace the Email credential to OTP based. Is it possible ?
export default NextAuth({
providers:[
Providers.Email({
// Need the credentials. In my case the OTP to get passed here.
},
}),
],
secret: process.env.SECRET,
session: {
jwt: true,
},
Login API call hits when I use signIn(). I first tried with async authorize but it was failed in my case.
callbacks: {
jwt: async ({ token, users }) => {
const user = await axios({
url: API_URL,
method: "post",
data: {
query: `mutation{
login(
mobileNumber: "1111111146",
mobileCountryCode: "00",
password: "admin123"
) {
expiresAt
accessToken
}
}`,
},
}).then((result) => {
console.log(result.data.data,'result')
return result.data
})
token = user.data.login.accessToken
return user
},
session: ({ session, token }) => {
if (token) {
session = token
}
return session
},
},
theme: {
colorScheme: "dark",
brandColor: "",
logo: "/logo.png",
},
debug: process.env.NODE_ENV === "development"
})
