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.

Advertisement

2 thoughts on “Google authentication and authorization in Blazor webassembly

  1. Safa April 20, 2022 / 6:07 am

    Hello, thanks a lot for your tutorial.
    It is a great help. Is there any way to use Google and Microsoft login together in Blazor Webassembly? Have a good day.

    • Chandradev April 20, 2022 / 7:29 am

      Yes, if you will use Azure B2C authentication, we will get options to use all login service provider. I have plan to write blog post on this topic

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.