Encountering an Unhandled Runtime Error SyntaxError: Unexpected end of JSON input when trying to SignIn or SignOut with authentication credentials.
The error is puzzling as it displays the popup error message, but still manages to register the token and session.
Below is the authorization code snippet using credentials:
CredentialsProvider({
id: 'credentials',
name: 'Credenciales',
async authorize(credentials, req) {
if (!(credentials.email.length > 0) || !(credentials.password.length > 0)) {
throw new Error('Email or password was not provided');
}
const formData = new FormData();
formData.append('username', credentials.email);
formData.append('password', credentials.password);
formData.append('client_id', credentials.rif);
const url = `${process.env.BACK_ENDPOINT}/login/`
const response = await fetch(url,{
method: 'POST',
body: formData
});
if (response.status === 401) {
return {
'details': 'error',
'message': 'The username or password is not valid'
}
}
if (response.status === 500) {
throw new Error('An error has occurred');
}
const data = await response.json();
if (response.status > 400 && response.status < 500) {
console.error(data)
if (data.detail) {
throw data.message;
}
throw data;
}
if(data.details === 'success'){
return data
}
return null
}
}),
This section showcases my signIn Callback function:
signIn: async({ user, account, profile, email, credentials }) => {
// console.log('signIn', {user, account, profile, email, credentials})
if (account.type === 'credentials'){
if(user.details === 'success') return true
if(user.details === 'error') return false
}
},
Lastly, this snippet demonstrates how the onsubmit handle works in the frontend:
const objectValues= {
email: values.email,
password: values.password,
rif: values.rif,
callbackUrl: '/',
}
signIn('credentials', objectValues)