Is it possible to avoid page reloading when using custom credentials?

[danyel117]

Your question
Is it possible to avoid page reloading when using custom credentials? (like an SPA behaviour)

What are you trying to do
I'm using custom credentials because I'm using a customer's database which has its own api, and I've designed my own login page. When I hit login after entering credentials, I handle the authentication with my cusotmer's api inside the [...nextauth].js file. When authentication happens, the page goes to whichever page I've specified in the callback.

However, I would prefer to show a "loading" component and wait until authentication happens, listening the session inside a useEffect, for example. Once the session variable has data, I would then handle the logic without seing a reload on the page.

Reproduction
Implement the custom login page in the documentation and watch the redirect after hitting Sign In:
import React from 'react';
import { csrfToken } from 'next-auth/client';

export default function SignIn({ csrfToken }) {
return (

Username



Password


Sign in

);
}

SignIn.getInitialProps = async (context) => {
return {
csrfToken: await csrfToken(context),
};
};

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[YuriFontella]

I'm looking for that too.
It would be interesting if the singIn function had a return response instead of reloading the page, and we had to do something like this:

Promise.reject ('/ login? error = true')
The form data is lost and no user interaction occurs.

[balazsorban44]

Hi there! Could someone tell me, ideally what would you like to be returned? Or would simply don't redirecting anywhere/reloading enough?

[marco-koenen]

Hi all, I think that not reloading the page is not enough. For example, how to deal with errors when normally the errors are passed with the URL? For me it would be best if something is returned with the SignIn() function. For the beginning I think it would be sufficient if two fields are returned:

{
  "status": 200,
  "error": null
}

If the status is 200, the signIn was successful. Everything above 400 is an error.

{
  "status": 401,
  "error": "CredentialsSignin"
}

or

{
  "status": 500,
  "error": "internalServerError"
}

What do the others think about it? Am I missing something? Maybe it would be helpful to return the CallbackUrl as well.

[joeynimu]

I am also looking for a solution for this. Is it possible to achieve this? If I can be pointed to the implementation details, I'd be happy to add this feature.

PS: I am new to the code base

[marioestradaf]

Looking forward to have this enhancement.

I'm using next-auth as a login service then would be nice to handle logic, redirects an error handling at page level when next-auth authorize or fail to sign in the user from a custom login (credentials) form.

[marioestradaf]

I'm looking for that too.
It would be interesting if the singIn function had a return response instead of reloading the page, and we had to do something like this:

Promise.reject ('/ login? error = true')
The form data is lost and no user interaction occurs.

nice approach

[github-actions]

🎉 This issue has been resolved in version 3.3.0-canary.1 🎉

The release is available on:

• GitHub release
• npm package (@canary dist-tag)

Your semantic-release bot 📦🚀

[nickforbizz]

setting redirect to false seemed to work for me
const onSubmit = async (data,e) => { e.preventDefault() let response = await signIn("credentials",{redirect: false, ...data}); console.log(response); reset(); // SignIntoProvider('EmailPassword', { callbackUrl: "/Dashboard"}) }

My response
OK
{ "error": "CredentialsSignin", "status": 200, "ok": true, "url": null }
invalid
{ "error": "CredentialsSignin", "status": 401, "ok": false, "url": null }

[KayBeSee]

Is there a way to do this with other oauth signin options?

I have a page with images on it that are stored in state. When the user goes to sign in, the page refreshes and images are no longer persisted.

[Arcalise08]

Is there a way to do this with other oauth signin options?

I have a page with images on it that are stored in state. When the user goes to sign in, the page refreshes and images are no longer persisted.

I second this

[its-kos]

I still get an issue that when I invoke signIn, I have a page refresh (its actually a redirect to the same page). Even when i set { redirect: false } in the signIn call. Any ideas ?

[edgarsbarajas]

Any solve for signIn with google? Setting redirect: false refreshes the page causing loss of form data.

await signIn("google", { redirect: false })

[its-kos]

Try preventing the default action of the form when submitting.