@auth0/auth0-spa-js 1.19.2 → 1.19.3

package/dist/typings/Auth0Client.d.ts

@@ -90,7 +90,7 @@ export default class Auth0Client {
      *
      * @param options
      */
-    getIdTokenClaims(options?: GetIdTokenClaimsOptions): Promise<IdToken>;
+    getIdTokenClaims(options?: GetIdTokenClaimsOptions): Promise<IdToken | undefined>;
     /**
      * ```js
      * await auth0.loginWithRedirect(options);
@@ -102,14 +102,14 @@ export default class Auth0Client {
      *
      * @param options
      */
-    loginWithRedirect(options?: RedirectLoginOptions): Promise<void>;
+    loginWithRedirect<TAppState = any>(options?: RedirectLoginOptions<TAppState>): Promise<void>;
     /**
      * After the browser redirects back to the callback page,
      * call `handleRedirectCallback` to handle success and error
      * responses from Auth0. If the response is successful, results
      * will be valid according to their expiration times.
      */
-    handleRedirectCallback(url?: string): Promise<RedirectLoginResult>;
+    handleRedirectCallback<TAppState = any>(url?: string): Promise<RedirectLoginResult<TAppState>>;
     /**
      * ```js
      * await auth0.checkSession();
@@ -127,6 +127,12 @@ export default class Auth0Client {
      * `Auth0Client` constructor. You should not need this if you are using the
      * `createAuth0Client` factory.
      *
+     * **Note:** the cookie **may not** be present if running an app using a private tab, as some
+     * browsers clear JS cookie data and local storage when the tab or page is closed, or on page reload. This effectively
+     * means that `checkSession` could silently return without authenticating the user on page refresh when
+     * using a private tab, despite having previously logged in. As a workaround, use `getTokenSilently` instead
+     * and handle the possible `login_required` error [as shown in the readme](https://github.com/auth0/auth0-spa-js#creating-the-client).
+     *
      * @param options
      */
     checkSession(options?: GetTokenSilentlyOptions): Promise<void>;

package/dist/typings/global.d.ts

@@ -213,7 +213,7 @@ export interface AuthorizeOptions extends BaseLoginOptions {
     code_challenge: string;
     code_challenge_method: string;
 }
-export interface RedirectLoginOptions extends BaseLoginOptions {
+export interface RedirectLoginOptions<TAppState = any> extends BaseLoginOptions {
     /**
      * The URL where Auth0 will redirect your browser to with
      * the authentication result. It must be whitelisted in
@@ -224,7 +224,7 @@ export interface RedirectLoginOptions extends BaseLoginOptions {
     /**
      * Used to store state before doing the redirect
      */
-    appState?: any;
+    appState?: TAppState;
     /**
      * Used to add to the URL fragment before redirecting
      */
@@ -234,11 +234,11 @@ export interface RedirectLoginOptions extends BaseLoginOptions {
      */
     redirectMethod?: 'replace' | 'assign';
 }
-export interface RedirectLoginResult {
+export interface RedirectLoginResult<TAppState = any> {
     /**
      * State stored when the redirect request was made
      */
-    appState?: any;
+    appState?: TAppState;
 }
 export interface PopupLoginOptions extends BaseLoginOptions {
 }

package/dist/typings/index.d.ts

@@ -12,6 +12,15 @@ import Auth0Client from './Auth0Client';
 import { Auth0ClientOptions } from './global';
 import './global';
 export * from './global';
+/**
+ * Asynchronously creates the Auth0Client instance and calls `checkSession`.
+ *
+ * **Note:** There are caveats to using this in a private browser tab, which may not silently authenticae
+ * a user on page refresh. Please see [the checkSession docs](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#checksession) for more info.
+ *
+ * @param options The client options
+ * @returns An instance of Auth0Client
+ */
 export default function createAuth0Client(options: Auth0ClientOptions): Promise<Auth0Client>;
 export { Auth0Client };
 export { GenericError, AuthenticationError, TimeoutError, PopupTimeoutError, PopupCancelledError, MfaRequiredError } from './errors';

package/dist/typings/storage.d.ts

@@ -5,7 +5,7 @@ interface ClientStorageOptions {
  * Defines a type that handles storage to/from a storage location
  */
 export declare type ClientStorage = {
-    get<T extends Object>(key: string): T;
+    get<T extends Object>(key: string): T | undefined;
     save(key: string, value: any, options?: ClientStorageOptions): void;
     remove(key: string): void;
 };

package/dist/typings/transaction-manager.d.ts

@@ -7,6 +7,7 @@ interface Transaction {
     code_verifier: string;
     redirect_uri: string;
     organizationId?: string;
+    state?: string;
 }
 export default class TransactionManager {
     private storage;
@@ -15,7 +16,7 @@ export default class TransactionManager {
     private storageKey;
     constructor(storage: ClientStorage, clientId: string);
     create(transaction: Transaction): void;
-    get(): Transaction;
+    get(): Transaction | undefined;
     remove(): void;
 }
 export {};

package/dist/typings/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.19.2";
+declare const _default: "1.19.3";
 export default _default;

package/package.json

@@ -3,7 +3,7 @@
   "name": "@auth0/auth0-spa-js",
   "description": "Auth0 SDK for Single Page Applications using Authorization Code Grant Flow with PKCE",
   "license": "MIT",
-  "version": "1.19.2",
+  "version": "1.19.3",
   "main": "dist/lib/auth0-spa-js.cjs.js",
   "types": "dist/typings/index.d.ts",
   "module": "dist/auth0-spa-js.production.esm.js",
@@ -21,7 +21,7 @@
     "test:watch:integration": "concurrently --raw npm:dev 'npm:test:open:integration'",
     "test:es-check": "npm run test:es-check:es5 && npm run test:es-check:es2015:module",
     "test:es-check:es5": "es-check es5 'dist/auth0-spa-js.production.js'",
-    "test:es-check:es2015:module": "es-check es2015 --module 'dist/auth0-spa-js.production.esm.js'",
+    "test:es-check:es2015:module": "es-check es2015 'dist/auth0-spa-js.production.esm.js' --module ",
     "test:integration:server": "npm run dev",
     "test:integration:tests": "wait-on http://localhost:3000/ && cypress run",
     "test:integration": "concurrently --raw --kill-others --success first npm:test:integration:server npm:test:integration:tests",
@@ -38,27 +38,27 @@
     "@types/jest": "^27.0.2",
     "@typescript-eslint/eslint-plugin-tslint": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "browserstack-cypress-cli": "^1.10.1",
+    "browserstack-cypress-cli": "1.8.1",
     "cli-table": "^0.3.6",
     "codecov": "^3.8.3",
-    "concurrently": "^6.3.0",
+    "concurrently": "^6.4.0",
     "cypress": "7.2.0",
-    "es-check": "^6.0.0",
+    "es-check": "^6.1.1",
     "eslint": "^7.32.0",
     "gzip-size": "^6.0.0",
-    "husky": "^7.0.2",
-    "idtoken-verifier": "^2.2.1",
-    "jest": "^27.2.4",
+    "husky": "^7.0.4",
+    "idtoken-verifier": "^2.2.2",
+    "jest": "^27.3.1",
     "jest-junit": "^13.0.0",
     "jest-localstorage-mock": "^2.4.18",
     "jsonwebtoken": "^8.5.1",
-    "oidc-provider": "^7.8.0",
+    "oidc-provider": "^7.10.1",
     "pem": "^1.14.4",
     "prettier": "^2.4.1",
-    "pretty-quick": "^3.1.1",
+    "pretty-quick": "^3.1.2",
     "qss": "^2.0.3",
     "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
+    "rollup": "^2.60.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-dev": "^1.1.3",
@@ -70,21 +70,21 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "serve": "^12.0.1",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^27.0.7",
     "tslib": "^2.3.1",
     "tslint": "^6.1.3",
     "tslint-config-security": "^1.16.0",
     "typedoc": "0.18.0",
-    "typescript": "^4.4.3",
+    "typescript": "^4.4.4",
     "wait-on": "^6.0.0"
   },
   "dependencies": {
     "abortcontroller-polyfill": "^1.7.3",
     "browser-tabs-lock": "^1.2.15",
-    "core-js": "^3.18.2",
+    "core-js": "^3.19.0",
     "es-cookie": "^1.3.2",
     "fast-text-encoding": "^1.0.3",
-    "promise-polyfill": "^8.2.0",
+    "promise-polyfill": "^8.2.1",
     "unfetch": "^4.2.0"
   },
   "files": [

package/src/Auth0Client.ts

@@ -309,20 +309,28 @@ export default class Auth0Client {
     code_challenge: string,
     redirect_uri: string
   ): AuthorizeOptions {
+    // These options should be excluded from the authorize URL,
+    // as they're options for the client and not for the IdP.
+    // ** IMPORTANT ** If adding a new client option, include it in this destructure list.
     const {
-      domain,
-      leeway,
       useRefreshTokens,
       useCookiesForTransactions,
       useFormData,
       auth0Client,
       cacheLocation,
       advancedOptions,
-      ...withoutClientOptions
+      detailedResponse,
+      nowProvider,
+      authorizeTimeoutInSeconds,
+      legacySameSiteCookie,
+      sessionCheckExpiryDays,
+      domain,
+      leeway,
+      ...loginOptions
     } = this.options;
 
     return {
-      ...withoutClientOptions,
+      ...loginOptions,
       ...authorizeOptions,
       scope: getUniqueScopes(
         this.defaultScope,
@@ -338,6 +346,7 @@ export default class Auth0Client {
       code_challenge_method: 'S256'
     };
   }
+
   private _authorizeUrl(authorizeOptions: AuthorizeOptions) {
     return this._url(`/authorize?${createQueryParams(authorizeOptions)}`);
   }
@@ -417,6 +426,7 @@ export default class Auth0Client {
       scope: params.scope,
       audience: params.audience || 'default',
       redirect_uri: params.redirect_uri,
+      state: stateIn,
       ...(organizationId && { organizationId })
     });
 
@@ -579,7 +589,7 @@ export default class Auth0Client {
    */
   public async getIdTokenClaims(
     options: GetIdTokenClaimsOptions = {}
-  ): Promise<IdToken> {
+  ): Promise<IdToken | undefined> {
     const audience = options.audience || this.options.audience || 'default';
     const scope = getUniqueScopes(this.defaultScope, this.scope, options.scope);
 
@@ -605,7 +615,9 @@ export default class Auth0Client {
    *
    * @param options
    */
-  public async loginWithRedirect(options: RedirectLoginOptions = {}) {
+  public async loginWithRedirect<TAppState = any>(
+    options: RedirectLoginOptions<TAppState> = {}
+  ) {
     const { redirectMethod, ...urlOptions } = options;
     const url = await this.buildAuthorizeUrl(urlOptions);
     window.location[redirectMethod || 'assign'](url);
@@ -617,9 +629,9 @@ export default class Auth0Client {
    * responses from Auth0. If the response is successful, results
    * will be valid according to their expiration times.
    */
-  public async handleRedirectCallback(
+  public async handleRedirectCallback<TAppState = any>(
     url: string = window.location.href
-  ): Promise<RedirectLoginResult> {
+  ): Promise<RedirectLoginResult<TAppState>> {
     const queryStringFragments = url.split('?').slice(1);
 
     if (queryStringFragments.length === 0) {
@@ -632,8 +644,7 @@ export default class Auth0Client {
 
     const transaction = this.transactionManager.get();
 
-    // Transaction should have a `code_verifier` to do PKCE for CSRF protection
-    if (!transaction || !transaction.code_verifier) {
+    if (!transaction) {
       throw new Error('Invalid state');
     }
 
@@ -648,6 +659,14 @@ export default class Auth0Client {
       );
     }
 
+    // Transaction should have a `code_verifier` to do PKCE for CSRF protection
+    if (
+      !transaction.code_verifier ||
+      (transaction.state && transaction.state !== state)
+    ) {
+      throw new Error('Invalid state');
+    }
+
     const tokenOptions = {
       audience: transaction.audience,
       scope: transaction.scope,
@@ -678,6 +697,7 @@ export default class Auth0Client {
       decodedToken,
       audience: transaction.audience,
       scope: transaction.scope,
+      ...(authResult.scope ? { oauthTokenScope: authResult.scope } : null),
       client_id: this.options.client_id
     });
 
@@ -709,6 +729,12 @@ export default class Auth0Client {
    * `Auth0Client` constructor. You should not need this if you are using the
    * `createAuth0Client` factory.
    *
+   * **Note:** the cookie **may not** be present if running an app using a private tab, as some
+   * browsers clear JS cookie data and local storage when the tab or page is closed, or on page reload. This effectively
+   * means that `checkSession` could silently return without authenticating the user on page refresh when
+   * using a private tab, despite having previously logged in. As a workaround, use `getTokenSilently` instead
+   * and handle the possible `login_required` error [as shown in the readme](https://github.com/auth0/auth0-spa-js#creating-the-client).
+   *
    * @param options
    */
   public async checkSession(options?: GetTokenSilentlyOptions) {
@@ -856,12 +882,8 @@ export default class Auth0Client {
         });
 
         if (options.detailedResponse) {
-          const {
-            id_token,
-            access_token,
-            oauthTokenScope,
-            expires_in
-          } = authResult;
+          const { id_token, access_token, oauthTokenScope, expires_in } =
+            authResult;
 
           return {
             id_token,
@@ -1015,8 +1037,10 @@ export default class Auth0Client {
     const code_challengeBuffer = await sha256(code_verifier);
     const code_challenge = bufferToBase64UrlEncoded(code_challengeBuffer);
 
+    const { detailedResponse, ...withoutClientOptions } = options;
+
     const params = this._getParams(
-      options,
+      withoutClientOptions,
       stateIn,
       nonceIn,
       code_challenge,
@@ -1063,6 +1087,7 @@ export default class Auth0Client {
         redirect_uri,
         ignoreCache,
         timeoutInSeconds,
+        detailedResponse,
         ...customOptions
       } = options;
 
@@ -1144,6 +1169,7 @@ export default class Auth0Client {
       audience,
       ignoreCache,
       timeoutInSeconds,
+      detailedResponse,
       ...customOptions
     } = options;
 

package/src/global.ts

@@ -240,7 +240,8 @@ export interface AuthorizeOptions extends BaseLoginOptions {
   code_challenge_method: string;
 }
 
-export interface RedirectLoginOptions extends BaseLoginOptions {
+export interface RedirectLoginOptions<TAppState = any>
+  extends BaseLoginOptions {
   /**
    * The URL where Auth0 will redirect your browser to with
    * the authentication result. It must be whitelisted in
@@ -251,7 +252,7 @@ export interface RedirectLoginOptions extends BaseLoginOptions {
   /**
    * Used to store state before doing the redirect
    */
-  appState?: any;
+  appState?: TAppState;
   /**
    * Used to add to the URL fragment before redirecting
    */
@@ -262,11 +263,11 @@ export interface RedirectLoginOptions extends BaseLoginOptions {
   redirectMethod?: 'replace' | 'assign';
 }
 
-export interface RedirectLoginResult {
+export interface RedirectLoginResult<TAppState = any> {
   /**
    * State stored when the redirect request was made
    */
-  appState?: any;
+  appState?: TAppState;
 }
 
 export interface PopupLoginOptions extends BaseLoginOptions {}

package/src/index.ts

@@ -16,6 +16,15 @@ import './global';
 
 export * from './global';
 
+/**
+ * Asynchronously creates the Auth0Client instance and calls `checkSession`.
+ *
+ * **Note:** There are caveats to using this in a private browser tab, which may not silently authenticae
+ * a user on page refresh. Please see [the checkSession docs](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#checksession) for more info.
+ *
+ * @param options The client options
+ * @returns An instance of Auth0Client
+ */
 export default async function createAuth0Client(options: Auth0ClientOptions) {
   const auth0 = new Auth0Client(options);
   await auth0.checkSession();

package/src/storage.ts

@@ -8,7 +8,7 @@ interface ClientStorageOptions {
  * Defines a type that handles storage to/from a storage location
  */
 export type ClientStorage = {
-  get<T extends Object>(key: string): T;
+  get<T extends Object>(key: string): T | undefined;
   save(key: string, value: any, options?: ClientStorageOptions): void;
   remove(key: string): void;
 };

package/src/transaction-manager.ts

@@ -10,14 +10,15 @@ interface Transaction {
   code_verifier: string;
   redirect_uri: string;
   organizationId?: string;
+  state?: string;
 }
 
 export default class TransactionManager {
-  private transaction: Transaction;
+  private transaction: Transaction | undefined;
   private storageKey: string;
 
   constructor(private storage: ClientStorage, private clientId: string) {
-    this.storageKey = `${TRANSACTION_STORAGE_KEY_PREFIX}.${clientId}`;
+    this.storageKey = `${TRANSACTION_STORAGE_KEY_PREFIX}.${this.clientId}`;
     this.transaction = this.storage.get(this.storageKey);
   }
 
@@ -29,7 +30,7 @@ export default class TransactionManager {
     });
   }
 
-  public get(): Transaction {
+  public get(): Transaction | undefined {
     return this.transaction;
   }
 

package/src/version.ts

@@ -1 +1 @@
-export default '1.19.2';
+export default '1.19.3';