This guide shows you all the steps to build an Angular SPA with a focus on authentication. The single-page web application uses Sign-In with google and angularx-social-login. The .NET Core authentication backend creates asymmetrically signed tokens to access another REST-API. The sample is fully working and can be the basis for a microservice-like architecture.
Authentication workflow and involved components:
When I wanted to create this kind of application I found many descriptions showing some part of it. This guide brings the parts together. It is structured so you can optionally test every step before continuing to the next.
This guide focuses on the key aspects. I link to other articles for details and download locations of the tools. I use Visual Studio Community for ASP.NET Core 3.1 development.
Create the Angular App
Add the Login Functionality
Authentication API in the .NET Core Backend
Use the Authentication API
Use the Access Token to Call the Service API
Final Thoughts and Outlook
Download and install Node.js/NPM.
Create the folder
C:\dev and open a command prompt.
Install Angular (I used Angular 9 when writing this guide):
C:\dev>npm install -g @angular/cli
Create the app:
C:\dev>ng new SampleAuthentication
Install the angularx social login module
C:\dev>npm install angularx-social-login
Start the app and open it in your browser to see if everything is working:
Further reading: Understanding Angular and Creating Your First Application
Get the app’s Client ID that google created for you. Copy the client ID. You will need it in further steps of this guide.
Use your google client ID and activate the social login module in the providers section of the app.module.ts:
The code above also adds the HttpClient module, which will be needed later in this guide.
Further reading: Google authentication in Angular
Start the app
Open the app URL in your browser, click “Sign in with google” to open the login dialogue. Sign in with your google credentials:
You are now logged in:
Use the debugger of the chrome browser to get the idToken and other information:
Google creates a new idToken on every login. The token is only valid for a short time.
Copy the idToken. You will need it in the next step of this guide if you want to manually test the API.
The authentication API will use the idToken from google and verify it. Then it creates an access token that grants access to the other APIs of your app.
You will have to increase security before you run this code in a production environment: Shorter token lifetime and refreshs, maybe use sessions instead of tokens, etc.
Install Visual Studio Community (it’s free) with the ASP.NET and web development workload. Create an ASP.NET Core Web API project.
Use the Visual Studio package manager to install the google Auth Package:
Create an API to verify the idToken.
Change the value in
settings.Audience to your google client ID, that you created in the first step of this guide:
The call to
GoogleJsonWebSignature.ValidateAsync will throw in case of an error. The
Authenticate method uses the
JwtGeneratorclass to create and return a custom access token.
With asymmetric JWT signing, only the authentication service knows the private key. The authentication service uses the private key to sign the access token and other APIs use only the public key to verify the access token.
JwtGenerator class, that generates the token:
The JwtGenerator uses the private key, that it gets passed from the UserController. Add the key to appsettings.json, where the UserControler reads it from.
You can use my private key for testing but you will have to create your own private-public key pair for production use. You will also have to adjust token lifetime, etc. for production use.
*Further reading: JWT Authentication with Asymmetric Encryption using certificates in ASP.NET Core. *This story also shows how to create your own public-private key pair.
Edit Startup.cs, which configures the ASP.NET Core backend to use the config, allow access from the Angular client, etc.:
Configure the .NET Core API project in debug mode on HTTPS port 5001:
Start the authentication API in Visual Studio:
Use postman to access the API at:
Post the idToken, that you copied from the Chrome debugger in the second step of this guide:
Use the Angular HttpClient to post the idToken to the authentication API. Modify app.component.ts:
Line 5: Import the HttpClient
Lines 21: Send the idToken
Do the same as in the first step of this guide.
Start the app
Login and use the debugger and logging in the chrome browser to verify that calling the backend and receiving the generated access token is working:
Copy the access token if you want to do a manual test in the next step of this guide.
The access token from the authentication API will grant access to this new service API.
Create an ASP.NET Core Web API project and configure it in debug mode on HTTPS port 5002:
Add a controller:
Edit Startup.cs. It took me a while to configure the validation of the token. The public key to the corresponding private key of the authentication API is used to validate the token. The hard part was to inject the public key. See the comments in the source code for details:
Use postman to access the service API via HTTP GET at:
In the previous part of this guide, you copied the access token in the Chrome debugger. Add it as bearer token to the call:
Modify app.component.ts to post the access key to the service API:
You successfully accessed the protected service API:
Your app is now fully working! But it is only a sample application and you will have to clean up the code and apply security best practices, maybe use a more secure OAuth flow, use Angular and .NET Core design patterns, error handling, etc. to use it in production. And you need your own private-public key pair (see JWT Authentication with Asymmetric Encryption using certificates in ASP.NET Core by
You can add other providers like facebook or your own account database.
See also my follow-up stories:
- How to use NSwag to autogenerate the TypeScript client to access the .NET Core service API and use OpenAPI/Swagger to describe the API
- How to deploy the .NET Core API and Angular App as Microservices to Kubernetes using Ingress and develop local using Docker Desktop
Please contact me if you have any questions, ideas, or suggestions.