I want to prevent the data to be stored in the session storage

[SirMajed]

Hello, I am facing an issue where after the user logged in using IdentityServer 4, he will be redirected to the react application and the data will be stored in session storage. I only want to receive access token from the server and to be stored in cookies as http only Can someone help me?

The following image is what I dont want it to be like that.

[SirMajed]

any help would be greatly appreciated. And If I am wrong someone correct me. I just want to receive from IdentityServer the access token and refresh token and to be stored in cookies as httpOnly. I dont want anything to be stored in either of local or session storage

[rahul-sharma-uipath]

the UserManagerSettings object that is provided to the AuthProvider in this library exposes a userStore parameter that lets you customize how the values are stored.

For example, we have the following config to store it in memory

import {
    InMemoryWebStorage,
    WebStorageStateStore,
} from 'oidc-client-ts';

const configuration: UserManagerSettings = {
        authority,
        client_id,
        ...
        userStore: new WebStorageStateStore({ store: new InMemoryWebStorage() }),
}

[SirMajed]

Thank you so much. Is there any way specifically to store the access and refresh tokens only in cookies instead of session storage using the userStore?

[rahul-sharma-uipath]

you'd have to create a new class to implement the Storage interface - the only issue is it wouldn't be HttpOnly per your original requirement.

However, using HttpOnly for these tokens would defeat the purpose of storing them since you then wouldn't be able to use them at all.

interface Storage {
    /** Returns the number of key/value pairs. */
    readonly length: number;
    /**
     * Removes all key/value pairs, if there are any.
     *
     * Dispatches a storage event on Window objects holding an equivalent Storage object.
     */
    clear(): void;
    /** Returns the current value associated with the given key, or null if the given key does not exist. */
    getItem(key: string): string | null;
    /** Returns the name of the nth key, or null if n is greater than or equal to the number of key/value pairs. */
    key(index: number): string | null;
    /**
     * Removes the key/value pair with the given key, if a key/value pair with the given key exists.
     *
     * Dispatches a storage event on Window objects holding an equivalent Storage object.
     */
    removeItem(key: string): void;
    /**
     * Sets the value of the pair identified by key to value, creating a new key/value pair if none existed for key previously.
     *
     * Throws a "QuotaExceededError" DOMException exception if the new value couldn't be set. (Setting could fail if, e.g., the user has disabled storage for the site, or if the quota has been exceeded.)
     *
     * Dispatches a storage event on Window objects holding an equivalent Storage object.
     */
    setItem(key: string, value: string): void;
    [name: string]: any;
} 

[dantheother]

HttpOnly would be OK for access tokens, the client doesn't need them. No good for identity tokens though.

@SirMajed if you can make changes to your server (that needs the access tokens) then you could probably redirect from Identity Server back to your server (set the login redirect url to your server, not to your client app), extract the access token and set the httponly cookie, then redirect from your server back to your react app.

I don't have an examples, this is just an "in theory this idea might work".