Auth0

Integrate with Auth0 authentication service to secure your services using the Auth0 token.

To use Auth0 with Squid, first add the Auth0 integration in the Squid Console. Check out the Setup guide for instructions.

Choose your client framework:

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();
}

Angular

Follow the Auth0 instructions for Angular using this link

You will need to install the Auth0 Angular SDK:

npm install @auth0/auth0-angular

In src/app/app.module.ts add the following snippets:

Client code

import { NgModule } from '@angular/core';
import { AuthModule, AuthService } from '@auth0/auth0-angular';
import { SquidModule } from '@squidcloud/angular';
import { Squid } from '@squidcloud/client';

@NgModule({
  declarations: [
    //...
  ],
  imports: [
    //...
    AuthModule.forRoot({
      domain: 'YOUR_AUTH0_DOMAIN',
      clientId: 'YOUR_AUTH0_CLIENT_ID',
      authorizationParams: {
        redirect_uri: window.location.origin,
      },
    }),
    SquidModule.forRoot({
      appId: 'YOUR_APP_ID',
      region: 'YOUR_REGION', // example: 'us-east-1.aws'
    }),
  ],
  providers: [
    //...
  ],
  //...
})
export class AppModule {
  constructor(squid: Squid, authService: AuthService) {
    squid.setAuthProvider({
      integrationId: 'auth0_INTEGRATION_ID',
      getToken: async (): Promise<string | undefined> => {
        // Wait until the authentication state is resolved by Auth0.
        const user = await firstValueFrom(auth0Service.user$);
        // Try to get an access token without user interaction if there is an active user.
        return user && auth0Service.getAccessTokenSilently();
      },
    });
  }
}