Adds support for changing the browser storage key prefixes

README.md

@@ -146,6 +146,8 @@ type TAuthConfig = {
   // NOTE: Many authentication servers will keep the client logged in by cookies. You should therefore use 
   // the 'logout()'-function to properly logout the client. Or configure your server not to issue cookies.
   storage?: 'local' | 'session'  // default: 'local'
+  // Sets the prefix used when storing login state
+  storageKeyPrefix?: string // default: 'ROCP_'
   // Set to false if you need to access the urlParameters sent back from the login server.
   clearURL?: boolean  // default: true
   // Can be used to provide any non-standard parameters to the authentication request

src/AuthContext.tsx

@@ -26,31 +26,41 @@ export const AuthProvider = ({ authConfig, children }: IAuthProvider) => {
   const config: TInternalConfig = useMemo(() => createInternalConfig(authConfig), [authConfig])
 
   const [refreshToken, setRefreshToken] = useBrowserStorage<string | undefined>(
-    'ROCP_refreshToken',
+    'refreshToken',
     undefined,
-    config.storage
+    config.storage,
+    config.storageKeyPrefix
   )
   const [refreshTokenExpire, setRefreshTokenExpire] = useBrowserStorage<number>(
-    'ROCP_refreshTokenExpire',
+    'refreshTokenExpire',
     epochAtSecondsFromNow(2 * FALLBACK_EXPIRE_TIME),
-    config.storage
+    config.storage,
+    config.storageKeyPrefix
   )
-  const [token, setToken] = useBrowserStorage<string>('ROCP_token', '', config.storage)
+  const [token, setToken] = useBrowserStorage<string>('ROCP_token', '', config.storage, config.storageKeyPrefix)
   const [tokenExpire, setTokenExpire] = useBrowserStorage<number>(
-    'ROCP_tokenExpire',
+    'tokenExpire',
     epochAtSecondsFromNow(FALLBACK_EXPIRE_TIME),
-    config.storage
+    config.storage,
+    config.storageKeyPrefix
+  )
+  const [idToken, setIdToken] = useBrowserStorage<string | undefined>(
+    'idToken',
+    undefined,
+    config.storage,
+    config.storageKeyPrefix
   )
-  const [idToken, setIdToken] = useBrowserStorage<string | undefined>('ROCP_idToken', undefined, config.storage)
   const [loginInProgress, setLoginInProgress] = useBrowserStorage<boolean>(
-    'ROCP_loginInProgress',
+    'loginInProgress',
     false,
-    config.storage
+    config.storage,
+    config.storageKeyPrefix
   )
   const [refreshInProgress, setRefreshInProgress] = useBrowserStorage<boolean>(
-    'ROCP_refreshInProgress',
+    'refreshInProgress',
     false,
-    config.storage
+    config.storage,
+    config.storageKeyPrefix
   )
   const [tokenData, setTokenData] = useState<TTokenData | undefined>()
   const [idTokenData, setIdTokenData] = useState<TTokenData | undefined>()

src/Hooks.tsx

@@ -1,7 +1,13 @@
 import { useEffect, useState } from 'react'
 
-function useBrowserStorage<T>(key: string, initialValue: T, type: 'session' | 'local'): [T, (v: T) => void] {
+function useBrowserStorage<T>(
+  key: string,
+  initialValue: T,
+  type: 'session' | 'local',
+  prefix?: string
+): [T, (v: T) => void] {
   const storage = type === 'session' ? sessionStorage : localStorage
+  key = `${prefix ?? ''}${key}`
 
   const [storedValue, setStoredValue] = useState<T>(() => {
     const item = storage.getItem(key)

src/Types.ts

@@ -73,6 +73,7 @@ export type TAuthConfig = {
   tokenExpiresIn?: number
   refreshTokenExpiresIn?: number
   storage?: 'session' | 'local'
+  storageKeyPrefix?: 'ROCP_'
 }
 
 export type TRefreshTokenExpiredEvent = {
@@ -103,4 +104,5 @@ export type TInternalConfig = {
   tokenExpiresIn?: number
   refreshTokenExpiresIn?: number
   storage: 'session' | 'local'
+  storageKeyPrefix?: string
 }

src/authConfig.ts

@@ -16,6 +16,7 @@ export function createInternalConfig(passedConfig: TAuthConfig): TInternalConfig
     postLogin = () => null,
     onRefreshTokenExpire = undefined,
     storage = 'local',
+    storageKeyPrefix = 'ROCP_',
   }: TAuthConfig = passedConfig
 
   const config: TInternalConfig = {
@@ -28,6 +29,7 @@ export function createInternalConfig(passedConfig: TAuthConfig): TInternalConfig
     postLogin: postLogin,
     onRefreshTokenExpire: onRefreshTokenExpire,
     storage: storage,
+    storageKeyPrefix: storageKeyPrefix,
   }
   validateConfig(config)
   return config

tests/jestSetup.js

@@ -9,7 +9,8 @@ beforeEach(() => {
 
   global.TextEncoder = TextEncoder
   global.TextDecoder = TextDecoder
-  global.crypto.subtle = nodeCrypto.subtle
+
+  global.crypto.subtle = nodeCrypto.webcrypto.subtle;
 
   delete window.location
   const location = new URL('https://www.example.com')

tests/login.test.tsx

@@ -22,7 +22,7 @@ test('First page visit should redirect to auth provider for login', async () =>
 
 test('Attempting to login with and unsecure context should raise error', async () => {
   // @ts-ignore
-  global.crypto.subtle.digest = undefined
+  window.crypto.subtle.digest = undefined
   render(
     <AuthProvider authConfig={authConfig}>
       <AuthConsumer />

tests/test-utils.tsx

@@ -2,6 +2,7 @@ import { AuthContext, TAuthConfig } from '../src'
 import React, { useContext } from 'react'
 
 export const authConfig: TAuthConfig = {
+  autoLogin: true,
   clientId: 'myClientID',
   authorizationEndpoint: 'myAuthEndpoint',
   tokenEndpoint: 'myTokenEndpoint',