Live Chat Icon For mobile
Live Chat Icon

How do I implement Blazor authentication with Google?

Platform: Blazor| Category: General

Google authentication is a process by which the user can use their Google accounts to get authorized to access particular data. Follow this procedure to implement Google authentication.

  1. Prerequisites
    • Visual Studio 2019
    • .NET Core 3.1
  2. Create a Blazor Server app by clicking the option on the Create a new project page as shown.

    Set the Authentication Type as Individual Accounts and then click Create.

  3. Go to Tools > NuGet Package Manager > Package Manager Console. Before running the app, we have to perform migration by running the following command in the Package Manager Console.

  4. Update-Database


    To configure a Google API Console project, check whether SSL is enabled by right-clicking the project name, selecting Properties, and selecting the Debug property. We need this URL for configuration.

  5. To create a Google API Console project, follow these steps.

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

    2. Click the Credentials page link under the topic “Create authorization credentials.” Sign in with your Google account and create a project by providing a project name.

    3. Click Create Credentials and select OAuth client ID.

    4. Select the Application type and type the name of the OAuth ID and the redirect URI (localhost URL given to enable SSL in your app) as shown.


    5. Click Create and note your client ID and client secret, which are important for Google authentication.

  6. Install the Google Authentication middleware NuGet package by typing the following command in the Package Manager Console.

  7. Microsoft.AspNetCore.Authentication.Google

  8. Configure the Blazor app to use Google authentication. Right-click the project, select Manage User Secrets, and type the following code.

    {  "Authentication:Google:ClientId": "your Google client ID",
      "Authentication:Google:ClientSecret": "your Google client secret"}

  9. Open the Startup.cs file and add the following code under the ConfigureServices method.

    public void ConfigureServices(IServiceCollection services)
            {
                services.AddAuthentication().AddGoogle(googleOptions =>
                {
                    googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];
                    googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
                });

  10. Note the following about this code:

    • The AddGoogle() method is used to configure the authentication process in our application.

    • ClientID and ClientSecret will be read from the secrets.json file by the code.

  11. Add Google authorization to the Blazor page.
    Use the Authorize attribute by using the @ directive in a Blazor page to restrict unauthorized users.

     @page "/fetchdata"
    @attribute [Authorize]
    @using Microsoft.AspNetCore.Authorization
    This code will allow the authorized user alone to see the fetchdata page

  12. Output

    The following image shows the output after running the application.

  13. The following image shows the output after clicking Login to navigate to the authorization page.

    The following image shows the output after the user is authorized using their Google account.

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.