Angular Standalone Components Code Sample: Basic Authentication

v18

Standalone Components

Updated on June 21, 2024

This Angular Standalone Components code sample powers up the "Angular Authentication By Example: Standalone Components" guide, where you can learn how to implement authentication in Angular apps using Auth0 by Okta.

Angular Standalone Components Code Sample Specs

This code sample uses the following main tooling versions:

• Angular v18.0.1
• TypeScript v5.4.2
• Auth0 Angular SDK v2.2.3

The Angular Standalone Components project dependency installations were tested with npm v10.2.4. Running the Angular application was tested using Node.js v18.19.1.

Quick Auth0 Set Up

First and foremost, if you haven't already, sign up for an Auth0 account to connect your application with the Auth0 Identity Platform.

Next, you'll connect your Single-Page Application (SPA) with Auth0. You'll need to create an application registration in the Auth0 Dashboard and get two configuration values: the Auth0 Domain and the Auth0 Client ID. You'll also need to define an Auth0 Audience value within your project to practice making secure calls to an external API.

Get the Auth0 domain and client ID

• Open the Applications section of the Auth0 Dashboard.

• Click on the Create Application button and fill out the form with the following values:

Hello World Client

Application Type

Single Page Web Applications

• Click on the Create button.

An Auth0 Application page loads up.

As such, click on the "Settings" tab of your Auth0 Application page, locate the "Application URIs" section, and fill in the following values:

http://localhost:4040/callback

http://localhost:4040

http://localhost:4040

Scroll down and click the "Save Changes" button.

Next, locate the "Basic Information" section.

When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes it easy to copy and paste code as you follow along.

As such, enter the "Domain" and "Client ID" values in the following fields to set up your single-page application in the next section:

Set Up the Angular Standalone Components Code Sample

Start by cloning the project into your local machine:

git clone https://github.com/auth0-developer-hub/spa_angular_typescript_hello-world_standalone-components.git

Make the project directory your current working directory:

cd spa_angular_typescript_hello-world_standalone-components

Then, check out the basic-authentication branch, which holds all the Angular Standalone Components code related to implementing basic user authentication with Auth0:

git checkout basic-authentication

Next, install the Angular Standalone Components project dependencies:

npm install

Create a .env file under the root project directory:

touch .env

Populate it with the following environment variables:

AUTH0_DOMAIN=AUTH0-DOMAIN
AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
AUTH0_CALLBACK_URL=http://localhost:4040/callback
API_SERVER_URL=http://localhost:6060

This Angular code sample is compatible with any "Auth0 Hello World" API code samples, which run on http://localhost:6060 by default. However, the basic-authentication branch mocks the external API server using json-server.

Execute the following command to run the JSON server API:

npm run api

Finally, open another terminal tab and execute this command to run your Angular Standalone Components application:

npm start

Use the Angular Standalone Components Sample Application

You can now visit http://localhost:4040/ to access the application.

If you want to learn how to implement user authentication in Angular step by step using Standalone Components, check out the "Angular Authentication By Example: Standalone Components".

When you click on the "Log In" button, Angular takes you to the Auth0 Universal Login page. Your users can log in to your application through a page hosted by Auth0, which provides them with a secure, standards-based login experience that you can customize with your own branding and various authentication methods, such as logging in with a username and password or with a social provider like Facebook or Google.

Once you log in, visit the protected "Profile" page to see all the user profile information that Auth0 securely shares with your application using ID tokens:

• http://localhost:4040/profile

You can test that the protected Angular routes require users to log in before accessing them. Click on the "Log Out" button and try to access the Profile page, Protected page, or the Admin page:

• http://localhost:4040/profile
• http://localhost:4040/protected
• http://localhost:4040/admin

If everything is working as expected, Angular redirects you to log in with Auth0.

View on GitHub

Report an issue

Give us feedback

Connect the Angular Standalone Components Code Sample with an API Server

Before you can practice requesting protected resources from an external API server using access tokens, you need to set up and configure an API with Auth0. You can pair this Angular Standalone Components code sample with any of our "Hello World" API server code samples.

Set up a Hello World API server

Pick an API code sample in your preferred backend framework and language from the list below and follow the instructions on the code sample page to set it up. Once you complete the sample API server set up, please return to this Angular Standalone Components code sample page to learn how to integrate that API server with your Angular Standalone Components application.

Actix Web/Rust API:Authorization Code Sample

Code sample of a simple Actix Web server that implements token-based authorization using Auth0.

ASP.NET Core Code Sample:Web API Authorization

Code sample of a simple ASP.NET Core server that implements token-based authorization using Auth0.

ASP.NET Core v5 Code Sample:Web API Authorization

Code sample of a simple ASP.NET Core v5.0 server that implements token-based authorization using Auth0.

Django/Python API:Authorization Code Sample

Code sample of a simple Django server that implements token-based authorization using Auth0.

Express.js Code Sample:Basic API Authorization

Code sample of a simple Express.js server that implements token-based authorization using Auth0.

Express.js/TypeScript Code Sample:Basic API Authorization

Code sample of a simple Express.js server built with TypeScript that implements token-based authorization using Auth0.

FastAPI/Python Code Sample:Basic API Authorization

Code sample of a simple FastAPI server that implements token-based authorization using Auth0.

Flask/Python API:Authorization Code Sample

Code sample of a simple Flask server that implements token-based authorization using Auth0.

Laravel/PHP Code Sample:Basic API Authorization with Auth0 Laravel SDK

Code sample of a simple Laravel server that implements token-based authorization using the Auth0 Laravel SDK.

Laravel/PHP Code Sample:Basic API Authorization with Auth0 PHP SDK

Code sample of a simple Laravel server that implements token-based authorization using the Auth0 PHP SDK.

Lumen Code Sample:Basic API Authorization

Code sample of a simple Lumen server that implements token-based authorization using Auth0.

NestJS Code Sample:Basic API Authorization

Code sample of a simple NestJS server that implements token-based authorization using Auth0.

Phoenix/Elixir API:Authorization Code Sample

Code sample of a simple Phoenix server that implements token-based authorization using Auth0.

Ruby on Rails API:Authorization Code Sample

Code sample of a simple Rails server that implements authorization using Auth0.

Spring Code Sample:Basic API Authorization

Java code sample that implements token-based authorization in a Spring Web API server to protect API endpoints, using Spring Security and the Okta Spring Boot Starter.

Spring Functional Code Sample:Basic API Authorization

Java code sample that implements token-based authorization in a Spring Web API server to protect API endpoints, following a functional approach.

Spring WebFlux Code Sample:Basic API Authorization

Java code sample that implements token-based authorization in a Spring WebFlux API server to protect API endpoints, using Spring Security and the Okta Spring Boot Starter.

Golang Code Sample:Basic API Authorization

Code sample of a simple Golang server that implements token-based authorization using Auth0.

Symfony Code Sample:Basic API Authorization

Code sample of a simple Symfony server that implements token-based authorization using Auth0.

While setting up the API server code sample, you created an Auth0 Audience value. Store that value in the following field so that you can use it throughout the instructions present in this section easily:

Set up the Angular Standalone Components client application

If you haven't cloned the repository already, start by cloning the Angular Standalone Components project into your local machine:

git clone https://github.com/auth0-developer-hub/spa_angular_typescript_hello-world_standalone-components.git

Make the project directory your current working directory:

cd spa_angular_typescript_hello-world_standalone-components

Then, check out the basic-authentication-with-api-integration branch:

git checkout basic-authentication-with-api-integration

Next, install the Angular Standalone Components project dependencies:

npm install

Now, either create or update the .env file under the Angular Standalone Components project directory with the following:

AUTH0_DOMAIN=AUTH0-DOMAIN
AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
AUTH0_CALLBACK_URL=http://localhost:4040/callback
API_SERVER_URL=http://localhost:6060
AUTH0_AUDIENCE=AUTH0-AUDIENCE

This time around, you include a AUTH0_AUDIENCE value, which is an identifier that represents the compatible Hello World API you just registered in your Auth0 tenant. This identifier is also known as the Auth0 audience. Your Angular Standalone Components application must provide this value to the Auth0 authorization server in order to get a valid access token to make authenticated requests to the compatible external API.

If you haven't started the Angular Standalone Components application yet, execute this command to run it:

npm start

Now your Angular Standalone Components is all set up to request protected data from the "Hello World" API server of your choice. Ensure that your API server is running and visit the Protected page or the Admin page of your Angular Standalone Components application:

• http://localhost:4040/protected
• http://localhost:4040/admin

Verify that these pages are displaying the relevant messages from the API.

This basic-authentication-with-api-integration branch of the code sample repository demonstrates how to request protected data from an API using access tokens in Angular.

View on GitHub

Report an issue

Give us feedback