Add support for connected accounts

Author: adamjmcgrath

.gitignore

@@ -109,3 +109,5 @@ test-results
 cypress/screenshots
 cypress/videos
 .npmrc
+
+!auth0-auth0-spa-js-2.6.0-connected-accounts.tgz

__mocks__/@auth0/auth0-spa-js.tsx

@@ -1,3 +1,5 @@
+const actual = jest.requireActual('@auth0/auth0-spa-js');
+
 const handleRedirectCallback = jest.fn(() => ({ appState: {} }));
 const buildLogoutUrl = jest.fn();
 const buildAuthorizeUrl = jest.fn();
@@ -9,6 +11,7 @@ const getIdTokenClaims = jest.fn();
 const isAuthenticated = jest.fn(() => false);
 const loginWithPopup = jest.fn();
 const loginWithRedirect = jest.fn();
+const connectAccountWithRedirect = jest.fn();
 const logout = jest.fn();
 const getDpopNonce = jest.fn();
 const setDpopNonce = jest.fn();
@@ -28,10 +31,13 @@ export const Auth0Client = jest.fn(() => {
     isAuthenticated,
     loginWithPopup,
     loginWithRedirect,
+    connectAccountWithRedirect,
     logout,
     getDpopNonce,
     setDpopNonce,
     generateDpopProof,
     createFetcher,
   };
 });
+
+export const ResponseType = actual.ResponseType;

__tests__/auth-provider.test.tsx

@@ -1,6 +1,7 @@
 import {
   Auth0Client,
   GetTokenSilentlyVerboseResponse,
+  ResponseType
 } from '@auth0/auth0-spa-js';
 import '@testing-library/jest-dom';
 import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
@@ -192,6 +193,7 @@ describe('Auth0Provider', () => {
     );
     clientMock.handleRedirectCallback.mockResolvedValueOnce({
       appState: undefined,
+      response_type: ResponseType.Code
     });
     const wrapper = createWrapper();
     renderHook(() => useContext(Auth0Context), {
@@ -214,6 +216,7 @@ describe('Auth0Provider', () => {
     );
     clientMock.handleRedirectCallback.mockResolvedValueOnce({
       appState: { returnTo: '/foo' },
+      response_type: ResponseType.Code
     });
     const wrapper = createWrapper();
     renderHook(() => useContext(Auth0Context), {
@@ -257,6 +260,7 @@ describe('Auth0Provider', () => {
     clientMock.getUser.mockResolvedValue(user);
     clientMock.handleRedirectCallback.mockResolvedValue({
       appState: { foo: 'bar' },
+      response_type: ResponseType.Code
     });
     const onRedirectCallback = jest.fn();
     const wrapper = createWrapper({
@@ -266,7 +270,43 @@ describe('Auth0Provider', () => {
       wrapper,
     });
     await waitFor(() => {
-      expect(onRedirectCallback).toHaveBeenCalledWith({ foo: 'bar' }, user);
+      expect(onRedirectCallback).toHaveBeenCalledWith({ foo: 'bar', response_type: ResponseType.Code }, user);
+    });
+  });
+
+  it('should handle connect account redirect and call a custom handler', async () => {
+    window.history.pushState(
+      {},
+      document.title,
+      '/?connect_code=__test_code__&state=__test_state__'
+    );
+    const user = { name: '__test_user__' };
+    const connectedAccount = {
+      id: 'abc123',
+      connection: 'google-oauth2',
+      access_type: 'offline' as 'offline',
+      created_at: '2024-01-01T00:00:00.000Z',
+      expires_at: '2024-01-02T00:00:00.000Z',
+    }
+    clientMock.getUser.mockResolvedValue(user);
+    clientMock.handleRedirectCallback.mockResolvedValue({
+      appState: { foo: 'bar' },
+      response_type: ResponseType.ConnectCode,
+      ...connectedAccount,
+    });
+    const onRedirectCallback = jest.fn();
+    const wrapper = createWrapper({
+      onRedirectCallback,
+    });
+    renderHook(() => useContext(Auth0Context), {
+      wrapper,
+    });
+    await waitFor(() => {
+      expect(onRedirectCallback).toHaveBeenCalledWith({
+        foo: 'bar',
+        response_type: ResponseType.ConnectCode,
+        connectedAccount
+      }, user);
     });
   });
 
@@ -412,6 +452,35 @@ describe('Auth0Provider', () => {
     expect(warn).toHaveBeenCalled();
   });
 
+  it('should provide a connectAccountWithRedirect method', async () => {
+    const wrapper = createWrapper();
+    const { result } = renderHook(
+      () => useContext(Auth0Context),
+      { wrapper }
+    );
+    await waitFor(() => {
+      expect(result.current.connectAccountWithRedirect).toBeInstanceOf(Function);
+    });
+    await result.current.connectAccountWithRedirect({
+      connection: 'google-apps'
+    });
+    expect(clientMock.connectAccountWithRedirect).toHaveBeenCalledWith({
+      connection: 'google-apps',
+    });
+  });
+
+  it('should handle errors from connectAccountWithRedirect', async () => {
+    const wrapper = createWrapper();
+    const { result } = renderHook(
+      () => useContext(Auth0Context),
+      { wrapper }
+    );
+    clientMock.connectAccountWithRedirect.mockRejectedValue(new Error('__test_error__'));
+    await act(async () => {
+      await expect(result.current.connectAccountWithRedirect).rejects.toThrow('__test_error__');
+    });
+  });
+
   it('should provide a logout method', async () => {
     const user = { name: '__test_user__' };
     clientMock.getUser.mockResolvedValue(user);
@@ -814,6 +883,7 @@ describe('Auth0Provider', () => {
   it('should provide a handleRedirectCallback method', async () => {
     clientMock.handleRedirectCallback.mockResolvedValue({
       appState: { redirectUri: '/' },
+      response_type: ResponseType.Code
     });
     const wrapper = createWrapper();
     const { result } = renderHook(
@@ -827,6 +897,7 @@ describe('Auth0Provider', () => {
         appState: {
           redirectUri: '/',
         },
+        response_type: ResponseType.Code
       });
     });
     expect(clientMock.handleRedirectCallback).toHaveBeenCalled();
@@ -926,6 +997,7 @@ describe('Auth0Provider', () => {
       appState: {
         redirectUri: '/',
       },
+      response_type: ResponseType.Code
     });
     clientMock.getUser.mockResolvedValue(undefined);
     const wrapper = createWrapper();
@@ -938,6 +1010,7 @@ describe('Auth0Provider', () => {
       appState: {
         redirectUri: '/',
       },
+      response_type: ResponseType.Code
     });
   });
 
@@ -1012,6 +1085,7 @@ describe('Auth0Provider', () => {
     );
     clientMock.handleRedirectCallback.mockResolvedValue({
       appState: undefined,
+      response_type: ResponseType.Code
     });
     render(
       <StrictMode>

__tests__/utils.test.tsx

@@ -42,6 +42,15 @@ describe('utils hasAuthParams', () => {
     ].forEach((search) => expect(hasAuthParams(search)).toBeTruthy());
   });
 
+  it('should recognise the connect_code and state param', async () => {
+    [
+      '?connect_code=1&state=2',
+      '?foo=1&state=2&connect_code=3',
+      '?connect_code=1&foo=2&state=3',
+      '?state=1&connect_code=2&foo=3',
+    ].forEach((search) => expect(hasAuthParams(search)).toBeTruthy());
+  });
+
   it('should recognise the error and state param', async () => {
     [
       '?error=1&state=2',

auth0-auth0-spa-js-2.6.0-connected-accounts.tgz

@@ -35,4 +35,5 @@ module.exports = {
       statements: 100,
     },
   },
+  setupFiles: ['./jest.setup.js']
 };

jest.config.js

@@ -0,0 +1,9 @@
+// jest.setup.js
+const { TextEncoder, TextDecoder } = require('util');
+
+if (typeof global.TextEncoder === 'undefined') {
+  global.TextEncoder = TextEncoder;
+}
+if (typeof global.TextDecoder === 'undefined') {
+  global.TextDecoder = TextDecoder;
+}

jest.setup.js

@@ -95,6 +95,6 @@
     "react-dom": "^16.11.0 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "^2.5.0"
+    "@auth0/auth0-spa-js": "file:auth0-auth0-spa-js-2.6.0-connected-accounts.tgz"
   }
 }

package-lock.json

@@ -10,6 +10,8 @@ import {
   GetTokenSilentlyVerboseResponse,
   RedirectLoginOptions as SPARedirectLoginOptions,
   type Auth0Client,
+  RedirectConnectAccountOptions,
+  ConnectAccountRedirectResult
 } from '@auth0/auth0-spa-js';
 import { createContext } from 'react';
 import { AuthState, initialAuthState } from './auth-state';
@@ -120,6 +122,28 @@ export interface Auth0ContextInterface<TUser extends User = User>
     config?: PopupConfigOptions
   ) => Promise<void>;
 
+  /**
+   * ```js
+   * await connectAccountWithRedirect({
+   *   connection: 'google-oauth2',
+   *   authorizationParams: {
+   *     access_type: 'offline',
+   *     scope: 'openid profile email https://www.googleapis.com/auth/drive.readonly',
+   *   }
+   * });
+   * ```
+   *
+   * Redirects to the `/connect` URL using the parameters
+   * provided as arguments. This then redirects to the connection's login page
+   * where the user can authenticate and authorize the account to be connected.
+   *
+   * If connecting the account is successful `onRedirectCallback` will be called
+   * with the details of the connected account.
+   */
+  connectAccountWithRedirect: (
+    options: RedirectConnectAccountOptions
+  ) => Promise<void>;
+
   /**
    * ```js
    * auth0.logout({ logoutParams: { returnTo: window.location.origin } });
@@ -140,7 +164,7 @@ export interface Auth0ContextInterface<TUser extends User = User>
    *
    * @param url The URL to that should be used to retrieve the `state` and `code` values. Defaults to `window.location.href` if not given.
    */
-  handleRedirectCallback: (url?: string) => Promise<RedirectLoginResult>;
+  handleRedirectCallback: (url?: string) => Promise<RedirectLoginResult | ConnectAccountRedirectResult>;
 
   /**
    * Returns the current DPoP nonce used for making requests to Auth0.
@@ -207,6 +231,7 @@ export const initialContext = {
   getIdTokenClaims: stub,
   loginWithRedirect: stub,
   loginWithPopup: stub,
+  connectAccountWithRedirect: stub,
   logout: stub,
   handleRedirectCallback: stub,
   getDpopNonce: stub,