auth0-react

Follow the Auth0 instructions for React using this link

You will need to install the Auth0 React SDK:

npm install @auth0/auth0-react

Initialize the Auth0 provider:

Client code

import { Auth0Provider } from '@auth0/auth0-react';
import { SquidContextProvider } from '@squidcloud/react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Auth0Provider
    domain="YOUR_AUTH0_DOMAIN"
    clientId="YOUR_AUTH0_CLIENT_ID"
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: 'auth0-api-id', // Auth0 API (audience) ID used to issue an access token for calls to the backend.
    }}
  >
    <SquidContextProvider
      options={{
        appId: 'YOUR_APP_ID',
        region: 'YOUR_REGION', // example: 'us-east-1.aws'
      }}
    >
      <App />
    </SquidContextProvider>
  </Auth0Provider>
);

Set the user's auth ID token:

Client code

import { useAuth0 } from '@auth0/auth0-react';
import { useSquid } from '@squidcloud/react';

function App() {
  const { isLoading, user, getAccessTokenSilently } = useAuth0();
  const { setAuthProvider } = useSquid();

  useEffect(() => {
    setAuthProvider({
      integrationId: 'auth0_INTEGRATION_ID',
      getToken: () => user && getAccessTokenSilently(),
    });
  }, [user, getAccessTokenSilently, setAuthProvider]);

  if (isLoading) {
    // Render your loading indicator.
    return <span>Loading...</span>;
  }

  // Render your application
}

To make the user's authentication information available to backend functions, pass the Access Token to Squid:

Client code

squid.setAuthProvider({
  getToken: () => 'USER_AUTH_ID_TOKEN',
  integrationId: 'AUTH_INTEGRATION_ID',
});

The following is an example of how to access the authentication information on the backend:

Backend code

@secureCollection('users', 'read')
secureUsersRead(context: QueryContext<User>): boolean {
    const userAuth = this.getUserAuth();
}