Easily Implement Google Authentication in the Blazor WebAssembly App
Tags: blazor, development, security, ui
Published: 2024-06-06 03:08:05

---
title: Easily Implement Google Authentication in the Blazor WebAssembly App
published: true
date: 2024-06-04 10:20:15 UTC
tags: blazor, development, security, ui
canonical_url: https://www.syncfusion.com/blogs/post/google-authentication-blazor-wasm-app
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqdirc49uoxhpagm4lnp.png
---
**TL;DR:** Easily implement Google authentication in your Blazor WebAssembly app for enhanced security. Generate Google credentials, add them to your app, install the Google authentication library, and configure your app. We’ll also customize the login page to match your app’s design. Refer to the GitHub demo for detailed steps and code examples.

In the dynamic world of web development, security remains a paramount concern. Ensuring that users securely access the right resources and data is non-negotiable. Building upon our previous exploration of authentication with Azure Active Directory (AAD) in a [Blazor WebAssembly app](https://www.syncfusion.com/blogs/post/how-to-authenticate-a-blazor-webassembly-hosted-app-with-azure-active-directory.aspx "Blog: How to Authenticate a Blazor WebAssembly-Hosted App with Azure AD"), we now delve into another crucial aspect: enabling authentication using external providers,  explicitly focusing on Google authentication.

Google authentication offers a seamless and widely-used method for users to securely log in to apps using their Google accounts. Leveraging Google’s authentication services enhances your app’s security and provides users with a familiar and convenient authentication experience.

So, let’s get started!

## Implementing Google authentication in the Blazor WebAssembly app

Follow these steps to implement Google authentication in Blazor WebAssembly apps:

### Step 1: Generate Google client ID and client secret

Begin by generating your [Google client ID and client secret](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/social/google-logins?view=aspnetcore-7.0#create-the-google-oauth-20-client-id-and-secret "Create the Google OAuth 2.0 Client ID and secret"). This involves navigating through Google’s developer console and creating credentials specific to your application.

### Step 2: Integrate Google credentials

Open the **appsettings.json** file of your server app and modify it by adding the Google credentials.

```csharp
"Authentication": {
   "Google": {
     "ClientId": "xxx-xxxx.apps.googleusercontent.com",
     "ClientSecret": "xxxx-xxxxxxxxnu"
   }
 },
```

Ensure the client ID and secret match those generated in the previous step.

### Step 3: Install the Google authentication library

Next, incorporate the [Google authentication library](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.Google "Microsoft.AspNetCore.Authentication.Google NuGet package") into your server app using the following command in the **Package Manager Console** of **Visual Studio**.

```
Install-Package Microsoft.AspNetCore.Authentication.Google -Version 8.0.1
```

This command installs the necessary dependencies to enable Google authentication within your app.

### Step 4: Configure Google authentication

Once the package installation is finished, modify the **Program.cs** file to call the **AddGoogle** method with **ClientId** and **ClientSecret** options.

```csharp
builder. Services
    .AddAuthentication()
    .AddIdentityServerJwt().AddGoogle(o =>
    {
      o.ClientId = builder.Configuration.GetValue<string>("Authentication:Google:ClientId");
      o.ClientSecret = builder.Configuration.GetValue<string>("Authentication:Google:ClientSecret");
    });
```

After everything is set up, run your application. The Google option is available on the Login or Register page. This Google button is rendered by default from the [Google authentication library](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.Google "Microsoft.AspNetCore.Authentication.Google NuGet package"), as we have used the **RemoteAuthenticatorView** component of [Microsoft.AspNetCore.Components.WebAssembly.Authentication](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Authentication/ "Microsoft.AspNetCore.Components.WebAssembly.Authentication NuGet package") package on our authentication page.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Implementing-Google-authentication-in-the-Blazor-WebAssembly-app-1.png" alt="Implementing Google authentication in the Blazor WebAssembly app" style="width:100%">

  <figcaption>Implementing Google authentication in the Blazor WebAssembly app</figcaption>

</figure>

Now, users can effortlessly authenticate using their Google accounts.

## Customizing the login page in the Blazor WebAssembly app

By default, Blazor WebAssembly authentication provides pre-defined login views using the [RemoteAuthenticatorView](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.webassembly.authentication.remoteauthenticatorview?view=aspnetcore-7.0 "RemoteAuthenticatorView Class") component, which is visible on the client app page, [Client/Pages/Authentication.razor](https://github.com/SyncfusionExamples/authentication-and-authorization-in-blazor-web-assembly/blob/master/BlazorWASMAuthentication/Client/Pages/Authentication.razor#L5 "Authentication and Authorization in Blazor WebAssembly GitHub demo"). However, there are situations where aligning the login page with your application’s unique design and branding becomes imperative.

Let’s see how to customize the login page to meet your specific requirements.

### Step 1: Scaffold identity items

1.Navigate to the **Areas** folder in your server app and right-click on it to open the contextual menu.
2.Select **Add** < **New Scaffolded Item**…”[![Add New Scaffold](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Add-New-Scaffold.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Add-New-Scaffold.png)
3.Choose **Identity** and proceed by clicking **Add**.
4.Select your identity data context class and specify the items you wish to scaffold. Then, choose the **Account/Login** option to customize the login page.[![Scaffold Login & Identity](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Scaffold-Login-Identity.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Scaffold-Login-Identity.png)

### Step 2: Customize the login page

Once the Identity items are scaffolded, the login page will be imported into your application under **Areas****/****Identity****/****Pages****/****Account****/****Login****.****cshtml**. You now have complete control over customizing it according to your preferences.

Here, I have done a very simple customization. I have moved the position of the external login (Google) button to the bottom.[![Login Page Customization](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Login-Page-Customization.gif)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Login-Page-Customization.gif)

After implementing the necessary modifications, run your app to view the customized login page
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Customizing-the-login-page-in-the-Blazor-WebAssembly-app-with-Google-substantiation.png" alt="Customizing the login page in the Blazor WebAssembly app with Google substantiation" style="width:100%">

  <figcaption>Customizing the login page in the Blazor WebAssembly app with Google substantiation</figcaption>

</figure>

## GitHub reference

For more details, refer to the [implementing Google authentication in Blazor WebAssembly app GitHub demo](https://github.com/SyncfusionExamples/authentication-and-authorization-in-blazor-web-assembly "Authentication and Authorization in Blazor WebAssembly GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve outlined the process of integrating Google authentication into your Blazor WebAssembly app. Blazor WebAssembly simplifies authentication provider integration, ensuring your app’s security. For detailed guidance on authentication and authorization, consult the official Blazor WebAssembly [documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/?view=aspnetcore-7.0 "Secure ASP.NET Core Blazor WebAssembly").

Syncfusion’s [Blazor component library](https://www.syncfusion.com/blazor-components "Blazor component library") boasts over 85 responsive, lightweight components, perfect for modern web apps. The latest version of Essential Studio is available for existing customers on the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page"). If you’re new to Syncfusion, test our controls’ features with a 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products").

If you have inquiries, contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We’re committed to assisting you!

## Related blogs

- [Pro Annotations on Mobile PDFs with Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/mobile-pdf-annotations-with-blazor "Blog: Pro Annotations on Mobile PDFs with Blazor PDF Viewer")
- [Seamlessly Add Blazor Native UI Components in Hybrid Apps](https://www.syncfusion.com/blogs/post/add-blazor-component-in-hybrid-apps "Blog: Seamlessly Add Blazor Native UI Components in Hybrid Apps")
- [Efficiently Perform CRUD Actions in the Blazor DataGrid with GraphQL](https://www.syncfusion.com/blogs/post/crud-actions-blazor-datagrid-graphql "Blog: Efficiently Perform CRUD Actions in the Blazor DataGrid with GraphQL")
- [Boost Your Data Analysis: Best Practices for Optimizing Syncfusion Blazor Pivot Table Performance](https://www.syncfusion.com/blogs/post/tips-optimize-blazor-pivot-table "Blog: Boost Your Data Analysis: Best Practices for Optimizing Syncfusion Blazor Pivot Table Performance")