Email provider: refresh session object after user name updated

[DiegoMcDipster]

Hi,

I'm new to developing with React & Nextjs and this library has taken a lot of pain out of authentication.

I set up the email provider and it works like a dream. The only issue i am facing is that the email provider leaves the field user.name = null.

On the nav bar: if the session.user.name is null, I display the session.user.email. If it's not null, i display the session.user.name

I created a user form to update the user name. The update to the database works fine.

But the user name after the update doesn't appear on the nav bar, the email address remains. Unless i do a window refresh.

What do i need to do to refresh the session object so that it correctly displays the session.user.name once it's been updated?

Thanks in advance for you help!

[StefanSelfTaught]

Hello, why don't you update the value with React after the form has been successfully submitted?

[DiegoMcDipster]

Hi @StefanSelfTaught,

thanks for taking the time to reply.

So that it's clear what you mean, can you elaborate please?

[StefanSelfTaught]

I'm assuming your "form submission" is asynchronous. If the request to the server was successful and the database was updated you can use the returned value and update some state about the user, and then use that state value in you navbar.

[DiegoMcDipster]

OK. Thanks for elaborating. I did think of doing that but I thought it was a bit hacky and that because updating a user name via a form is such basic functionality, that there was a "better"/"proper" way to do it via the getSession... as suggested below...

[balazsorban44]

From the docs:

... you can can trigger an update of the session object across all tabs/windows by calling getSession() from a client side function.

So calling getSession after your form submission's success should update your session and therefore your navbar.

Link to docs: https://next-auth.js.org/getting-started/client#options

Objectively, this is well hidden and not straightforward in the documentation, but hopefully will work. If it does, we might want to open a "good first issue" asking someone to highlight this better in our docs.

[DiegoMcDipster]

@balazsorban44 thanks for the advice!

This is the code in my handleSubmit

    try {
      result = await fetch("/api/user", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });

      console.log("the session before getSession is : ", session.user.name);
      
      await getSession();
      console.log("the session after getSession is : ", session.user.name);
      await router.back();
    } catch (error) {
.....
    }

The original name for the user in the db is 'Zippy'. I use the form to update it to 'Bungle'.
I check the database and it has been correctly updated with 'Bungle'.

However, the console.log returns the name 'Zippy' before and after the getSession()

What am i doing wrong?

[balazsorban44]

getSession does also return the new session. Without seeing more of your code, it's hard to guess. Maybe React is doing some batching so session is not immediately updated after the getSession call.

[DiegoMcDipster]

Instead of posting my code here... i've used the nextauth example as an outline for what i'm doing. https://github.com/nextauthjs/next-auth-example

you reckon you could get it working for the example? if you added a button to update the header to have a name instead of email address at the top. keep in mind i'm using the email verification provider.

[DiegoMcDipster]

@balazsorban44 Not being able to use getSession to trigger the session udpate is an existing issue #596.

So, @StefanSelfTaught I ended up doing what you suggested, I used the workaround here: #371 (comment)

Thanks guys for pointing me in the right direction!

[balazsorban44]

You can follow #596, I'll try to have another look at it