Google authentication and authorization in Blazor webassembly


In my current blazor webassembly project I used the google authenticator. It is very simple to implement in Blazor web assembly. So i am making small blog post on this topic.

Step 1: Create the Blazor standalone project like this

This will create the all boilerplate code related with authentication and authorization.

microsoft.aspnetcore.components.webassembly.authentication package play the main role to communicate the authenticate users and obtain tokens to call protected APIs.

Step 2: Create a Google API Console project to obtain a client ID and client secret to configure the Google authentication in our application.

Follow the instruction as given below URL

https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin

and create the credentials like this

Step 3: Go to appsettings.json file and keep the required configuration like this

Step 4: Change the startup file like this
Step 5: Run the application
Click on Log in button. It will route to google login page

After authentication, It will come to our blazor application like this

Summary:

We saw that with help of microsoft.aspnetcore.components.webassembly.authentication package. It is very simple to implement third party authentication in our blazor web assembly application.

There was an error trying to log you in: ‘Invalid response Content-Type: text/html, from URL: https:login.microsoftonline.com/.well-known/openid-configuration’


I was implementing google authenticator feature on my Blazor web assembly POC demo. I was getting this exception

There was an error trying to log you in: ‘Invalid response Content-Type: text/html, from URL: https:login.microsoftonline.com/.well-known/openid-configuration’

My program.cs file was like

My appsettings.json file was like this

Workaround fix for this

>> change any name expect Local. You can give google or any other name. I hope it will help other developer.