Updating our existing Auth0 sign-in flow with New Connection

Dev Support
1

I manage a React webapp that has been using 8base for years. We use Auth0 for our authentication workflow:

import { Auth, AUTH_STRATEGIES, ISubscribableAuthClient } from '@8base/auth';
import { AppProvider } from '@8base/react-app-provider';
...
  const authClient = Auth.createClient(
    {
      strategy: AUTH_STRATEGIES.WEB_8BASE_AUTH0,
      subscribable: true,
    },
    {
      domain: REACT_APP_AUTH_DOMAIN,
      clientId: REACT_APP_AUTH_CLIENT_ID,
      redirectUri: '',
      logoutRedirectUri: `https://${workspaceEnv}.enlightapp.co/login`,
      authorize: (data: { email: string; password: string }) => login(data),
      logout,
    },
  );

  return (
    <AppProvider
      uri={REACT_APP_API_ENDPOINT}
      authClient={authClient as ISubscribableAuthClient}
      onRequestSuccess={() => {}}
      onRequestError={() => {}}
      withBatching={false}
    >

Our users log-in on a self-hosted login page, and receive an access token from the backend via this.authClient.oauth.passwordGrant({

I’ve been tasked with adding Single Sign On functionality–this involves giving the users the option to sign-in to Edlink via their Oauth2 protocol. I’ve successfully built this workflow via a Custom Social Connection on our Auth0 Dashboard, and can get an access token using their new loginWithRedirect functionality:

import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
...
    loginWithRedirect({
      appState: { returnTo: routes.student.home },
      authorizationParams: {
        connection: 'Edlink-Enlight-Connection',
      },
    });
...
const accessToken = await getAccessTokenSilently();

Unfortunately, this accessToken doesn’t seem compatible with the existing react package we were using. I can’t simply update the old authClient with this new token, and there doesn’t seem to be a clear way to merge these very distinct authentication procedures. I’ve tried creating a custom authclient but it seems incompatible with the 8base react package.

To be clear, the old and new user connections are linked in auth0 by email so I know I’m able to access the same old users we’ve had, just unable to update my react state accordingly throughout the webapp while preserving the existing username+password authentication which we still want to support. I would love any guidance you can provide on this matter, thanks so much.

2

it’s very good