Proposal to improve the experience of `useSession`

[JoaoPedroAS51]

Describe the feature

Hi! I'm João Pedro. I'm one of the maintainers of the nuxt 2 auth module :)

So, currently, each time useSession is used it makes a request to the api to get the session, which means we have to await for the request and this makes the component asynchronous. And if it's used in more than one component, it will make unnecessary requests.

My proposal is to use useSession only to get the data stored with useState, and fetch the session on load the page through a plugin.

This follows the same approach of the auth module, which fetches the user on load the auth plugin.

Additional information

No response

[BracketJohn]

Hey @JoaoPedroAS51!

Thank you for taking the time to propose this + great to get input from one of the nuxt 2 auth maintainers! (:

As for your suggestion: If I understand correctly, the plugin will do something like:

const { signIn } = useSession()  // no await as not async any longer

await signIn()

How would a user define that some route is unprotected? Did you also allow configuring specific routes? Because at the moment our users are able to do:

const { data } = await useSession({ required: false })

to not force a login for certain pages.

[JoaoPedroAS51]

Hey @BracketJohn! Thank you for getting back! :)

As for your suggestion: If I understand correctly, the plugin will do something like:

Yes, that's the idea. No await anymore.

How would a user define that some route is unprotected? Did you also allow configuring specific routes? Because at the moment our users are able to do useSession({ required: false }) to not force a login for certain pages.

Even though useSession({ required: boolean }) is something that NextAuth.js provides, I think that it doesn't fit quite well on Nuxt. The way I see is that components should not cause such redirects, only pages. So, in my opinion, the best way to protect and unprotect pages would be through a auth middleware, since it runs before navigating to a particular route. Then instead of the user creating it's own middleware, we could provide one out of the box, just like the old auth module:

// named
definePageMeta({
  middleware: 'auth',
})

// global (can be configured in nuxt.config: `auth.globalMiddleware: boolean`)
definePageMeta({
  // If the middleware is set to global, we can add `auth: false` to disable page protection.
  auth: false
})

// guest
definePageMeta({
  middleware: 'auth',
 // Setting to `auth: 'guest'` redirects to home page if already logged in. (home page can be configured in nuxt.config as well)
  auth: 'guest'
})

[JoaoPedroAS51]

@BracketJohn If you are interested, you can take a look at @eloqjs/nuxt-next-auth. I created this lib to fit the needs of the project I'm currently working on. So all theses things I'm suggesting, like this proposal and the fix of host/port with requrl , it's all there.

[BracketJohn]

Thanks @JoaoPedroAS51 really helpful. I think we'll take over some of the stuff from your module then, I like the approach and it makes it more "nuxt-ish" (:

[BracketJohn]

As discussed: Let's go ahead with this and make useSession sync (:

[BracketJohn]

I've gotten started (and already quite far) in #69. #69 will:

• make session sync
• use a plugin for session init,
• add a module-middleware that people can use,
• adds refresh options:
  • periodically,
  • on window focus

for another PR / issue:

• broadcasting