• Stars
    star
    175
  • Rank 218,059 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Auth0 SDK for Angular Single Page Applications

Auth0 SDK for Angular Single Page Applications

A library for integrating Auth0 into an Angular application.

Release Codecov Downloads License CircleCI

πŸ“š Documentation - πŸš€ Getting Started - πŸ’» API Reference - πŸ’¬ Feedback

Documentation

  • Quickstart - our interactive guide for quickly adding login, logout and user information to an Angular app using Auth0.
  • Sample App - a full-fledged Angular application integrated with Auth0.
  • FAQs - frequently asked questions about the auth0-angular SDK.
  • Examples - code samples for common Angular authentication scenario's.
  • Docs site - explore our docs site and learn more about Auth0.

Getting started

Requirements

This project only supports the actively supported versions of Angular as stated in the Angular documentation. Whilst other versions might be compatible they are not actively supported.

Installation

Using npm:

npm install @auth0/auth0-angular

We also have ng-add support, so the library can also be installed using the Angular CLI:

ng add @auth0/auth0-angular

Configure Auth0

Create a Single Page Application in the Auth0 Dashboard.

If you're using an existing application, verify that you have configured the following settings in your Single Page Application:

  • Click on the "Settings" tab of your application's page.
  • Ensure that "Token Endpoint Authentication Method" under "Application Properties" is set to "None"
  • Scroll down and click on the "Show Advanced Settings" link.
  • Under "Advanced Settings", click on the "OAuth" tab.
  • Ensure that "JsonWebToken Signature Algorithm" is set to RS256 and that "OIDC Conformant" is enabled.

Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:

  • Allowed Callback URLs: http://localhost:4200
  • Allowed Logout URLs: http://localhost:4200
  • Allowed Web Origins: http://localhost:4200

These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback.

Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.

Configure the SDK

Static configuration

Install the SDK into your application by importing AuthModule.forRoot() and configuring with your Auth0 domain and client id, as well as the URL to which Auth0 should redirect back after succesful authentication:

import { NgModule } from '@angular/core';
import { AuthModule } from '@auth0/auth0-angular';

@NgModule({
  // ...
  imports: [
    AuthModule.forRoot({
      domain: 'YOUR_AUTH0_DOMAIN',
      clientId: 'YOUR_AUTH0_CLIENT_ID',
      authorizationParams: {
        redirect_uri: window.location.origin,
      },
    }),
  ],
  // ...
})
export class AppModule {}

Dynamic configuration

Instead of using AuthModule.forRoot to specify auth configuration, you can provide a factory function using APP_INITIALIZER to load your config from an external source before the auth module is loaded, and provide your configuration using AuthClientConfig.set.

The configuration will only be used initially when the SDK is instantiated. Any changes made to the configuration at a later moment in time will have no effect on the default options used when calling the SDK's methods. This is also the reason why the dynamic configuration should be set using an APP_INITIALIZER, because doing so ensures the configuration is available prior to instantiating the SDK.

ℹ️ Any request made through an instance of HttpClient that got instantiated by Angular, will use all of the configured interceptors, including our AuthHttpInterceptor. Because the AuthHttpInterceptor requires the existence of configuration settings, the request for retrieving those dynamic configuration settings should ensure it's not using any of those interceptors. In Angular, this can be done by manually instantiating HttpClient using an injected HttpBackend instance.

import { AuthModule, AuthClientConfig } from '@auth0/auth0-angular';

// Provide an initializer function that returns a Promise
function configInitializer(
  handler: HttpBackend,
  config: AuthClientConfig
) {
  return () =>
    new HttpClient(handler)
      .get('/config')
      .toPromise()
      // Set the config that was loaded asynchronously here
      .then((loadedConfig: any) => config.set(loadedConfig));
}

export class AppModule {
  // ...
  imports: [
    HttpClientModule,
    AuthModule.forRoot(), // <- don't pass any config here
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: configInitializer, // <- pass your initializer function here
      deps: [HttpBackend, AuthClientConfig],
      multi: true,
    },
  ],
  // ...
}

Add login to your application

To log the user into the application, inject the AuthService and call its loginWithRedirect method.

import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public auth: AuthService) {}

  loginWithRedirect() {
    this.auth.loginWithRedirect();
  }

By default the application will ask Auth0 to redirect back to the root URL of your application after authentication. This can be configured by setting the redirectUri option.

For more code samples on how to integrate the auth0-angular SDK in your Angular application, including how to use our standalone and function APIs, have a look at our examples.

API reference

Explore public API's available in auth0-angular.

Feedback

Contributing

We appreciate feedback and contribution to this repo! Before you get started, please see the following:

Raise an issue

To provide feedback or report a bug, please raise an issue on our issue tracker.

Vulnerability Reporting

Please do not report security vulnerabilities on the public GitHub issue tracker. TheΒ Responsible Disclosure ProgramΒ details the procedure for disclosing security issues.


Auth0 Logo

Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?

This project is licensed under the MIT license. See the LICENSE file for more info.

More Repositories

1

node-jsonwebtoken

JsonWebToken implementation for node.js http://self-issued.info/docs/draft-ietf-oauth-json-web-token.html
JavaScript
17,054
star
2

java-jwt

Java implementation of JSON Web Token (JWT)
Java
5,403
star
3

express-jwt

connect/express middleware that validates a JsonWebToken (JWT) and set the req.user with the attributes
TypeScript
4,396
star
4

jwt-decode

Decode JWT tokens; useful for browser applications.
JavaScript
2,913
star
5

angular2-jwt

Helper library for handling JWTs in Angular apps
TypeScript
2,606
star
6

nextjs-auth0

Next.js SDK for signing in with Auth0
TypeScript
2,009
star
7

angular-jwt

Library to help you work with JWTs on AngularJS
JavaScript
1,259
star
8

lock

Auth0's signin solution
JavaScript
1,121
star
9

go-jwt-middleware

A Middleware for Go Programming Language to check for JWTs on HTTP requests
Go
978
star
10

auth0.js

Auth0 headless browser sdk
JavaScript
949
star
11

auth0-spa-js

Auth0 authentication for Single Page Applications (SPA) with PKCE
TypeScript
900
star
12

auth0-react

Auth0 SDK for React Single Page Applications (SPA)
TypeScript
864
star
13

node-jwks-rsa

A library to retrieve RSA public keys from a JWKS (JSON Web Key Set) endpoint.
JavaScript
824
star
14

node-jws

JSON Web Signatures
JavaScript
698
star
15

angular-storage

A storage library for AngularJS done right
JavaScript
644
star
16

repo-supervisor

Scan your code for security misconfiguration, search for passwords and secrets. πŸ”
JavaScript
634
star
17

node-auth0

Node.js client library for the Auth0 platform.
JavaScript
586
star
18

cosmos

πŸ”­ Auth0 Design System
JavaScript
545
star
19

JWTDecode.swift

A JWT decoder for iOS, macOS, tvOS, and watchOS
Swift
545
star
20

nginx-jwt

Lua script for Nginx that performs reverse proxy auth using JWT's
JavaScript
534
star
21

SimpleKeychain

A simple Keychain wrapper for iOS, macOS, tvOS, and watchOS
Swift
488
star
22

react-native-auth0

React Native toolkit for Auth0 API
TypeScript
477
star
23

express-openid-connect

An Express.js middleware to protect OpenID Connect web applications.
JavaScript
464
star
24

auth0-python

Auth0 SDK for Python
Python
445
star
25

JWTDecode.Android

A library to help you decode JWTs for Android
Java
437
star
26

docs

Auth0 documentation
JavaScript
366
star
27

auth0-PHP

PHP SDK for Auth0 Authentication and Management APIs.
PHP
355
star
28

wt-cli

Webtask CLI - all you need is code
JavaScript
322
star
29

auth0.net

.NET client for the Auth0 Authentication & Management APIs.
C#
296
star
30

passport-auth0

Auth0 authentication strategy for Passport.js
JavaScript
283
star
31

rules

Rules are code snippets written in JavaScript that are executed as part of the authentication pipeline in Auth0
JavaScript
283
star
32

react-native-lock

[DEPRECATED] A wrapper of Lock to use with React Native (iOS & Android)
Java
277
star
33

Auth0.swift

Auth0 SDK for Apple platforms
Swift
275
star
34

auth0-java

Java client library for the Auth0 platform
Java
265
star
35

Lock.swift

A Swift & iOS framework to authenticate using Auth0 and with a Native Look & Feel
Swift
251
star
36

auth0-cli

Build, manage and test your Auth0 integrations from the command line
Go
243
star
37

auth0-deploy-cli

The Auth0 Deploy CLI is a tool that helps you manage your Auth0 tenant configuration. It integrates into your development workflows as a standalone CLI or as a node module.
JavaScript
242
star
38

laravel-auth0

Laravel SDK for Auth0 Authentication and Management APIs.
PHP
224
star
39

Auth0.Android

Android toolkit for Auth0 API
Kotlin
213
star
40

jwks-rsa-java

Java
194
star
41

ruby-auth0

Ruby toolkit for Auth0 API
Ruby
189
star
42

cxn

cXn: extensible open-source CDN
Ruby
178
star
43

passport-windowsauth

Windows Authentication strategy for Passport.js
JavaScript
175
star
44

terraform-provider-auth0

The Auth0 Terraform Provider is the official plugin for managing Auth0 tenant configuration through the Terraform tool.
Go
161
star
45

styleguide

πŸ–Œ Conjunction of design patterns, components and resources used across our products.
Stylus
160
star
46

jwt-handbook-samples

JWT Handbook code samples
JavaScript
143
star
47

Lock.Android

Android Library to authenticate using Auth0 and with a Native Look & Feel
Java
140
star
48

wordpress

WordPress Plugin for Auth0 Authentication
PHP
133
star
49

node-samlp

SAML Protocol support for node (only IdP for now)
JavaScript
129
star
50

go-auth0

Go SDK for the Auth0 Management API.
Go
122
star
51

passport-linkedin-oauth2

Passport Strategy for LinkedIn OAuth 2.0
JavaScript
115
star
52

omniauth-auth0

OmniAuth strategy to login with Auth0
Ruby
112
star
53

symfony

Symfony SDK for Auth0 Authentication and Management APIs.
PHP
110
star
54

node-odata-parser

OData query string parser for node.js.
JavaScript
106
star
55

node-jwa

JSON Web Algorithms
JavaScript
98
star
56

express-jwt-authz

Validate the JWT scope to authorize access to an endpoint
JavaScript
97
star
57

auth0-vue

Auth0 authentication SDK for Vue.js apps
TypeScript
95
star
58

lock-passwordless

Auth0 Lock Passwordless [DEPRECATED]
JavaScript
93
star
59

auth0-aspnetcore-authentication

SDK for integrating Auth0 in ASPNET Core
C#
93
star
60

node-oauth2-jwt-bearer

Monorepo for libraries that protect Node APIs with OAuth2 Bearer JWTs
TypeScript
88
star
61

open-source-template

A template for open source projects at Auth0
85
star
62

auth0-angular2

84
star
63

auth0-oidc-client-net

OIDC Client for .NET Desktop and Mobile applications
C#
84
star
64

auth0-authorization-extension

Auth0 Extension that adds authorization features to your account
JavaScript
82
star
65

react-browserify-spa-seed

Seed / Boilerplate project to create your own SPA using React, Browserify and ReworkCSS
JavaScript
80
star
66

node-baas

Node.js implementation of Bcrypt as a micro service.
JavaScript
79
star
67

password-sheriff

Password policies made easy.
JavaScript
77
star
68

idtoken-verifier

Lightweight RSA JWT verification
JavaScript
76
star
69

sharelock-android

Sharelock Android app
Java
76
star
70

auth0-spring-security-api

Spring Security integration with Auth0 to secure your API with JWTs
Java
76
star
71

ad-ldap-connector

Auth0 AD and LDAP connector
JavaScript
70
star
72

nodejs-msi

Build an MSI Windows Installer for a node.js application using WIX Toolset.
PowerShell
70
star
73

id-generator

Generates random ids with a prefix (a la Stripe)
JavaScript
66
star
74

node-saml

SAML assertion creation for node
JavaScript
65
star
75

webtask-scripts

JavaScript
61
star
76

TouchIDAuth

A library for passwordless authentication using TouchID & JWT
Objective-C
60
star
77

passport-azure-ad-oauth2

OAuth 2.0 authentication Passport strategies for Windows Azure Active Directory
JavaScript
59
star
78

spa-pkce

JavaScript
58
star
79

discourse-plugin

Discourse plugin to authenticate with auth0.
Ruby
58
star
80

auth0-flutter

Auth0 SDK for Flutter
Dart
58
star
81

auth0-multitenant-spa-api-sample

JQuery SPA + Node.js API with multi-tenant support
JavaScript
58
star
82

sandboxjs

Sandbox node.js code like a boss
JavaScript
58
star
83

multitenant-jwt-auth

This sample shows how to implement an API that authenticates using JWTs. It supports mutiple tenants and JWT blacklisting.
JavaScript
54
star
84

coreos-mongodb

CoreOS MongoDB units
52
star
85

shiny-auth0

Auth0 shiny proxy
JavaScript
51
star
86

auth0-cordova

Auth0 integration for Cordova apps
JavaScript
49
star
87

disyuntor

A circuit-breaker implementation for node.js
TypeScript
48
star
88

sharelock-osx

Swift
47
star
89

passport-wsfed-saml2

passport strategy for both WS-fed and SAML2 protocol
JavaScript
47
star
90

php-jwt-example

Php JWT example.
PHP
46
star
91

auth0-aspnet-owin

Auth0 ASP.NET 4.5 Owin/Katana Authentication Handler
JavaScript
46
star
92

webauthn.me

webauthn.me, learn more about the Web Authentication API or try the debugger.
JavaScript
46
star
93

auth0-dotnet-templates

Auth0 Templates for .NET
C#
44
star
94

auth0-java-mvc-common

Contains common helper classes and api client logic that are used across our Java MVC libraries
Java
43
star
95

auth0-custom-password-reset-hosted-page

An example on how to do a custom reset password hosted page.
HTML
41
star
96

express-oauth2-bearer

Experimental Middleware for express.js to validate access tokens.
JavaScript
40
star
97

magic

Auth0 Cryptography Toolkit
JavaScript
40
star
98

single-page-app-seed

A very opinionated seed for creating Single Page Apps that uses NO framework at all. Just a bunch of component libs
JavaScript
39
star
99

kbd

Styles for <kbd> tags.
HTML
37
star
100

webtask-workshop

36
star