[Vue][Nuxt] SSR not working correctly

[zaalbarxx]

Description

Currently it is impossible to use this plugin with Nuxt.js in SSR mode due to plugin requiring document to be available (used for getting expiration date of token

at P.getAccessTokenExpirationMoment (vue-sdk/dist/vue-fusionauth.js:158:15)

Affects package

The package(s) in which this bug can be observed. @fusionauth/vue-sdk

Affects versions

1.0.0

Steps to reproduce

Steps to reproduce the behavior: Install simple nuxt app and define a new plugin in plugins directory like:

Expected behavior

Should properly setup the plugin, I believe it should be possible to for example pass the factory function for obtaining cookies so something like

app.vueApp.use(FusionAuthPlugin, {
cookies: cookies // or () => cookies
})

could be used.

Screenshots

Platform

(Please complete the following information)

• OS: Windows
• Chrome

[dmackinn]

Thanks @zaalbarxx for submitting, we'll take a look.

[JakeLo123]

Working on a fix for this. The SDK also uses localStorage, so the issue will continue there if cookies are patched.

...also looked into doing something like the below nuxt.config.ts, but that breaks the composability of the plugin.

// nuxt.config.ts
{
  plugins: [
    {
      src: '~/plugins/fusionauth',
      ssr: false,
      mode: 'client'
    }
  ]
}

In the meantime, I've added a note to the README that the SDK doesn't support SSR for v<=1.0.0.

[zaalbarxx]

As you said, while setting plugin as client-side only fixes some issues with server-side rendering breaking it also breaks usages of composables so everything has to be wrapped with if (process.client) {} which is suboptimal. I believe the usage of localStorage is not a problem here since it is only used during user interaction (which is clicking on login button). The usage which would need to be fixed is the one running automatically during bootstrap of the plugin. I guess the JS SDK could have some option to provide adapter for cookies like cookieAdapter: { get(key), set(key, value) } that would enable to either default implementation like

get(key) { return document.cookie }
set(key value) { document.cookie = value}

and then in Nuxt we could have something like

import { CookieAdapter } from 'fusionauth-vue-sdk';

const cookieAdapter: CookieAdapter | undefined = import.meta.client ? undefined : { get(key) {...some logic }, set(key, value) { ...someLogic } }
app.vueApp.use(FusionAuthVuePlugin, {
        clientId: "f66765f4-bcfe-4010-9586-e9219ed349ff",
        serverUrl: `${config.app.host}/auth`,
        redirectUri: 'http://localhost:3010',
        shouldAutoRefresh: true,
        shouldAutoFetchUserInfo: true,
        scope: 'openid',
        cookieAdapter
    });

That would propably also enable other frameworks to use this SDK since I guess React implementation also would have to deal with same issue when used in Next or something similar.

[zaalbarxx]

Any ETA on this ? @JakeLo123 @dmackinn Cheers 😄

[JakeLo123]

Any ETA on this ? @JakeLo123 @dmackinn Cheers 😄

Probably this week with v1.1.0!

[JakeLo123]

The SDK now supports Nuxt https://www.npmjs.com/package/@fusionauth/vue-sdk Thank you for logging this issue @zaalbarxx 🙏