LogoLogo
HomeDiscourseBlogDiscord
  • Introduction
  • Introduction
    • Quick start
    • Aurelia for new developers
    • Hello world
      • Creating your first app
      • Your first component - part 1: the view model
      • Your first component - part 2: the view
      • Running our app
      • Next steps
  • Templates
    • Template Syntax
      • Attribute binding
      • Event binding
      • Text interpolation
      • Template promises
      • Template references
      • Template variables
      • Globals
    • Custom attributes
    • Value converters (pipes)
    • Binding behaviors
    • Form Inputs
    • CSS classes and styling
    • Conditional Rendering
    • List Rendering
    • Lambda Expressions
    • Local templates (inline templates)
    • SVG
  • Components
    • Component basics
    • Component lifecycles
    • Bindable properties
    • Styling components
    • Slotted content
    • Scope and context
    • CustomElement API
    • Template compilation
      • processContent
      • Extending templating syntax
      • Modifying template parsing with AttributePattern
      • Extending binding language
      • Using the template compiler
      • Attribute mapping
  • Getting to know Aurelia
    • Routing
      • @aurelia/router
        • Getting Started
        • Creating Routes
        • Routing Lifecycle
        • Viewports
        • Navigating
        • Route hooks
        • Router animation
        • Route Events
        • Router Tutorial
        • Router Recipes
      • @aurelia/router-lite
        • Getting started
        • Router configuration
        • Configuring routes
        • Viewports
        • Navigating
        • Lifecycle hooks
        • Router hooks
        • Router events
        • Navigation model
        • Current route
        • Transition plan
    • App configuration and startup
    • Enhance
    • Template controllers
    • Understanding synchronous binding
    • Dynamic composition
    • Portalling elements
    • Observation
      • Observing property changes with @observable
      • Effect observation
      • HTML observation
      • Using observerLocator
    • Watching data
    • Dependency injection (DI)
    • App Tasks
    • Task Queue
    • Event Aggregator
  • Developer Guides
    • Animation
    • Testing
      • Overview
      • Testing attributes
      • Testing components
      • Testing value converters
      • Working with the fluent API
      • Stubs, mocks & spies
    • Logging
    • Building plugins
    • Web Components
    • UI virtualization
    • Errors
      • Kernel Errors
      • Template Compiler Errors
      • Dialog Errors
      • Runtime HTML Errors
    • Bundlers
    • Recipes
      • Apollo GraphQL integration
      • Auth0 integration
      • Containerizing Aurelia apps with Docker
      • Cordova/Phonegap integration
      • CSS-in-JS with Emotion
      • DOM style injection
      • Firebase integration
      • Markdown integration
      • Multi root
      • Progress Web Apps (PWA's)
      • Securing an app
      • SignalR integration
      • Strongly-typed templates
      • TailwindCSS integration
      • WebSockets Integration
      • Web Workers Integration
    • Playground
      • Binding & Templating
      • Custom Attributes
        • Binding to Element Size
      • Integration
        • Microsoft FAST
        • Ionic
    • Migrating to Aurelia 2
      • For plugin authors
      • Side-by-side comparison
    • Cheat Sheet
  • Aurelia Packages
    • Validation
      • Validation Tutorial
      • Plugin Configuration
      • Defining & Customizing Rules
      • Architecture
      • Tagging Rules
      • Model Based Validation
      • Validation Controller
      • Validate Binding Behavior
      • Displaying Errors
      • I18n Internationalization
      • Migration Guide & Breaking Changes
    • i18n Internationalization
    • Fetch Client
      • Overview
      • Setup and Configuration
      • Response types
      • Working with forms
      • Intercepting responses & requests
      • Advanced
    • Event Aggregator
    • State
    • Store
      • Configuration and Setup
      • Middleware
    • Dialog
  • Tutorials
    • Building a ChatGPT inspired app
    • Building a realtime cryptocurrency price tracker
    • Building a todo application
    • Building a weather application
    • Building a widget-based dashboard
    • React inside Aurelia
    • Svelte inside Aurelia
    • Synthetic view
    • Vue inside Aurelia
  • Community Contribution
    • Joining the community
    • Code of conduct
    • Contributor guide
    • Building and testing aurelia
    • Writing documentation
    • Translating documentation
Powered by GitBook
On this page
  • Prerequisites
  • Setting Up the Auth Service
  • Configuring the Auth0 Client
  • Setting Up the Auth0 Client Provider
  • Using the Auth Service in Components
  • Handling Authentication Callbacks
  • Conclusion

Was this helpful?

Export as PDF
  1. Developer Guides
  2. Recipes

Auth0 integration

In this recipe, we will demonstrate how to integrate Auth0 with Aurelia 2 for authentication. Auth0 provides a flexible, drop-in solution to add authentication and authorization services to your applications.

Prerequisites

Before we begin, make sure you have:

  • An Auth0 account and a configured Auth0 application.

  • The @auth0/auth0-spa-js package installed in your Aurelia project.

Setting Up the Auth Service

First, we'll create an authentication service that will handle the interaction with Auth0.

// src/services/auth-service.ts
import { IAuth0Client, Auth0Client, Auth0ClientOptions } from '@auth0/auth0-spa-js';
import { DI, IContainer, resolve } from 'aurelia';

export const IAuthService = DI.createInterface<IAuthService>('IAuthService', x => x.singleton(AuthService));
export type IAuthService = AuthService;

export class AuthService {
  private auth0Client: IAuth0Client;

  constructor(private container: IContainer = resolve(IContainer)) {
    const options: Auth0ClientOptions = {
      domain: 'YOUR_AUTH0_DOMAIN',
      client_id: 'YOUR_AUTH0_CLIENT_ID',
      redirect_uri: window.location.origin,
      // ...other Auth0 client options
    };

    this.auth0Client = new Auth0Client(options);
  }

  async login(): Promise<void> {
    await this.auth0Client.loginWithRedirect();
  }

  async handleAuthentication(): Promise<void> {
    const query = window.location.search;
    if (query.includes('code=') && query.includes('state=')) {
      await this.auth0Client.handleRedirectCallback();
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }

  isAuthenticated(): Promise<boolean> {
    return this.auth0Client.isAuthenticated();
  }

  getUser(): Promise<any> {
    return this.auth0Client.getUser();
  }

  logout(): void {
    this.auth0Client.logout({
      returnTo: window.location.origin,
    });
  }
}

Configuring the Auth0 Client

Replace 'YOUR_AUTH0_DOMAIN' and 'YOUR_AUTH0_CLIENT_ID' with the actual values from your Auth0 application settings.

Setting Up the Auth0 Client Provider

Next, we'll create an Auth0 client provider to ensure our AuthService has access to the Auth0Client instance.

// src/main.ts
import { Aurelia, Registration } from 'aurelia';
import { MyApp } from './my-app';
import { IAuthService } from './services/auth-service';

Aurelia
  .register(Registration.instance(IAuthService, new AuthService()))
  .app(MyApp)
  .start();

Using the Auth Service in Components

Now that we have our AuthService, we can inject it into our components to use its functionality.

// src/components/login.ts
import { customElement, ICustomElementViewModel, resolve } from 'aurelia';
import { IAuthService } from '../services/auth-service';

@customElement({ name: 'login', template: `<button click.trigger="login()">Login</button>` })
export class Login implements ICustomElementViewModel {

  constructor(private authService: IAuthService = resolve(IAuthService)) {}

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

Handling Authentication Callbacks

After a successful login, Auth0 will redirect back to your application with the authentication result in the URL. We need to handle this in our application.

// src/my-app.ts
import { IRouter, ICustomElementViewModel, watch, resolve } from 'aurelia';
import { IAuthService } from './services/auth-service';

export class MyApp implements ICustomElementViewModel {

  constructor(
    private router: IRouter = resolve(IRouter),
    private authService: IAuthService = resolve(IAuthService),
  ) {}

  binding(): void {
    this.handleAuthentication();
  }

  async handleAuthentication(): Promise<void> {
    if (await this.authService.isAuthenticated()) {
      // User is authenticated, redirect to the home route or perform other actions
    } else {
      await this.authService.handleAuthentication();
      // Handle post-login actions
    }
  }

  // ... Other component logic
}

Conclusion

You have now integrated Auth0 with Aurelia 2 using TypeScript. This setup provides a starting point to secure your application with Auth0. Be sure to handle tokens securely and implement proper error handling as needed. Remember to replace placeholders with your actual Auth0 domain and client ID in the AuthService.

PreviousApollo GraphQL integrationNextContainerizing Aurelia apps with Docker

Last updated 1 year ago

Was this helpful?