Avant de commencer l’intégration d’Auth0 avec votre application Angular, sachez que l’intégration Angular avec Auth0 utilise le protocole OpenID Connect (OIDC). Si vous souhaitez intégrer OpenID Connect avec Angular, vous pouvez consulter ce Guide OpenID Connect Angular.

Comment utiliser Auth0 avec Angular

Auth0 est une puissante plateforme d’authentification et d’autorisation qui offre aux développeurs un moyen sécurisé et fiable d’implémenter l’authentification des utilisateurs dans leurs applications. Combinée à Angular, elle offre une expérience utilisateur fluide et des fonctionnalités de sécurité robustes. Voici un guide pour utiliser Auth0 avec Angular :

Créer un compte Auth0

Pour commencer, vous devez vous inscrire sur Auth0. Rendez-vous sur le site Auth0 (https://auth0.com) et créez un nouveau compte. Une fois votre compte créé, vous pouvez créer une nouvelle application dans le tableau de bord Auth0.

Installer le SDK Auth0

Pour utiliser Auth0 avec Angular, vous devez installer le package SDK Auth0. Ouvrez votre terminal ou invite de commandes et naviguez vers le répertoire de votre projet Angular. Exécutez la commande suivante pour installer le SDK Auth0 :

npm install @auth0/auth0-angular

Configurer Auth0 dans votre application Angular

Dans votre projet Angular, vous devez configurer Auth0 pour qu’il fonctionne avec votre application. Créez un nouveau fichier appelé auth.config.ts dans le répertoire src de votre projet et ajoutez le code suivant :

export const environment = {
  auth: {
    domain: 'YOUR_AUTH0_DOMAIN',
    clientId: 'YOUR_AUTH0_CLIENT_ID',
    redirectUri: 'http://localhost:4200',
  },
}

Remplacez 'YOUR_AUTH0_DOMAIN' par votre domaine Auth0 et 'YOUR_AUTH0_CLIENT_ID' par votre identifiant client Auth0.

Ajouter le module Auth0 à votre application Angular

Dans votre projet Angular, ouvrez le fichier app.module.ts et importez le module Auth0 en ajoutant le code suivant :

import { AuthModule } from '@auth0/auth0-angular'

@NgModule({
  imports: [
    AuthModule.forRoot({
      domain: environment.auth.domain,
      clientId: environment.auth.clientId,
    }),
  ],
})
export class AppModule {}

Implémenter l’authentification dans vos composants Angular

Maintenant que vous avez configuré Auth0 dans votre application Angular, vous pouvez commencer à implémenter l’authentification dans vos composants.

Par exemple, pour ajouter un bouton de connexion, ouvrez le fichier HTML du composant souhaité et ajoutez le code suivant :

<button (click)="login()">Login</button>

Dans le fichier TypeScript du composant correspondant, ajoutez le code suivant :

import { AuthService } from '@auth0/auth0-angular'

export class LoginComponent {
  constructor(private authService: AuthService) {}

  login(): void {
    this.authService.loginWithRedirect()
  }
}

Ce code utilise le service AuthService fourni par Auth0 pour initier le processus de connexion lorsque le bouton est cliqué.

Protéger vos routes avec des Auth Guards

Pour sécuriser certaines routes de votre application, vous pouvez utiliser les Auth Guards fournis par Auth0.

Tout d’abord, créez un nouveau fichier appelé auth.guard.ts dans le répertoire src de votre projet et ajoutez le code suivant :

import { Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { AuthService } from '@auth0/auth0-angular'

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router,
  ) {}

  canActivate(): boolean {
    if (this.authService.isAuthenticated) {
      return true
    } else {
      this.router.navigate(['/login'])
      return false
    }
  }
}

Ce guard vérifie si l’utilisateur est authentifié et autorise l’accès à la route si c’est le cas. Sinon, il le redirige vers la page de connexion.

Pour utiliser l’Auth Guard, ouvrez le fichier module de la route souhaitée et ajoutez le code suivant :

import { AuthGuard } from '../auth.guard'

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AuthGuard],
  },
]

Ce code protège la route /protected et garantit que seuls les utilisateurs authentifiés peuvent y accéder.

C’est tout ! Vous avez réussi à intégrer Auth0 avec votre application Angular. Vous pouvez désormais profiter des avantages d’un système d’authentification sécurisé et efficace pour vos utilisateurs.