Identity: Google Authentication with React and Asp.NET Identity

The Need

  1. Asp.Net Core Web Api Setup
  2. React Single Page App Setup
  3. Asp.NET Identity DB Setup
  4. Email Sender
  5. Sign Up & Activation
  6. Check User Authentication Status
  7. Change Password
  8. Sign In
  9. Policy Based Access Management
  10. Token Refresh
  11. Google Authentication with React and Asp.NET API
  12. Microsoft Authentication with React and Asp.NET API
  13. Twitter Authentication with React and Asp.NET API

Assumptions

1. Frontend: Login with Google

  • Api Gateway: My Asp.NET API is hosted using Azure App Service, and served via Azure API Manager. By looking at the URL, you see the below fragments:
  • Scheme + Base: https://api.domain.com
  • Identifying Fragment: /identity
  • Route Versioning: /v1
  • Controller Action: /account/external-login
  • Redirect Uri: This is the address where eventually will be called when user successfully authenticates with Google, and get redirected to your API. However this is NOT the first url when user heads back to your API. There is another path which will be called right after a successful auth, and that is by default “google-signin”. More on this later

2. Backend: External-Login

3. Google Consent Screen

4. Google Credentials

Exception: Cookie not Found

5. Callback

  1. signInManager.GetExternalLoginInfoAsync: What this does is to grab all the arguments in the URL coming back from Google, make some other calls back to google to verify the request, and then translate it to user info we are after.
  2. accountService.ExternalLogin: I will cover this in the next section.
  3. Trasnfer the User Tokens to SPA: The other part that needs some attention here, is how to transfer the generated token to be used by your React app. The thing is, this is a call not initiated by your React app, and we need to find a way to transfer the tokens to your React app.
  4. First of all, the approach I have taken regarding external logins, is to rely on them “Just” to authenticate my users. Once done, I will translate that into my own login procedures, and generate my own JWT access and refresh tokens, which will be managed by the Asp.NET APIs.
  5. Knowing that, I generate the JWT tokens, and transfer that to my client using Cookies, as you see in the above snippet. Finally I redirect my user to a page, responsible for reading that Cookie and extracting the JWT tokens to be used by my frontend app.
  6. This is a pretty clean, no hacky, way to manage the Auth flow between React App, and Asp.NET API using Asp.NET Identity as the Identity backend.

6. Manage User Identity

Pellerex: Identity Foundation for Your Next Enterprise Software

--

--

--

Software Engineer at https://technologyleads.io

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Xamarin vs React Native

Now Experience UI Framework: Forms

How the Google Analytics tracking code works

JAVA8 Optional Best Practices

Web Development & Code 101 — Full Guide [2022]

22 Shout-Outs to Open Source and Infinite Creativity

12 Tools That Will Help You Solve UX Problems Appearing on Your Website

How to integrate React with Django

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mahdi Karimipour

Mahdi Karimipour

Software Engineer at https://technologyleads.io

More from Medium

CQRS Pattern Implementation

Anemic Domain Model vs Rich Domain Model

Extend your .NET WCF codebase’s life expectancy with CoreWCF

Object Cloning Distilled A.K.A Correct way to work with Prototype Pattern in C#