patrickmonteiro / quasarOidcClient

project Quasar Framework with oidc-client library
22 stars 2 forks source link

SSR with oidc-client #5

Open rmemon opened 4 years ago

rmemon commented 4 years ago

Hi

How we can store data in quasar cookies instead of local storage for SSR?

Arsync commented 4 years ago

Raw answer is:

First, you need to implement CookieStorage like this:

// CookieStorage.ts

import { Cookies } from 'quasar';

// Attention to this to secure your cookies!
const options = {
    sameSite: 'Strict',
    secure: true,
    path: '/'
};

const encode = encodeURIComponent;

export { Cookies };

export default class CookieStorage
{
    private cookies: Cookies;

    public constructor(cookies: Cookies)
    {
        this.cookies = cookies;
    }

    public setItem(key: string, value: any)
    {
        this.cookies.set(encode(key), value, options);
    }

    public getItem(key: string)
    {
        return JSON.stringify(this.cookies.get(encode(key))); //, { doNotParse: true });
    }

    public removeItem(key: string)
    {
        this.cookies.remove(encode(key), options);
    }

    public key(index: number)
    {
        const allKeys = Object.keys(this.cookies.getAll());
        return (index > -1 && index <= allKeys.length) ? allKeys[index] : '';
    }
}

You need to extract right cookies in your custom boot file, then to override userStore field in settings of UserManager:

import { WebStorageStateStore } from 'oidc-client';
import CookieStorage, { Cookies } from './CookieStorage';

export function boot(({ ssrContext }) =>
{
    const cookies = process.env.SERVER
        ? Cookies.parseSSR(ssrContext)
        : Cookies;

    const oidcSettings = {
      //
      // other settings goes here
      //
      userStore: new WebStorageStateStore({
        store: new CookieStorage(cookies),
        //prefix: '' // custom prefix if you like
      }),
    };

    // pass it to new UserManager(oidcSettings);
});

Enjoy!

rmemon commented 4 years ago

@Arsync Thank you for the quick help, it works for me