Identity: Twitter 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


1. Frontend: Login with Twitter

  • 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:
  • 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 Twitter, 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 “signin-twitter”. More on this later

2. Backend: External-Login

3. Twitter Consent Screen

4. Twitter 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 Twitter, make some other calls back to Twitter 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

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

Recommended from Medium

Staircase of a Numismatist- Arranging Coins Problem

Patterns in Usage Equal Happy Users

Docker Storage Drivers

Slugging It Out In Open Source

The Naughty Reason Nails Were Vanishing from the HMS Dolphin

Flutter : Remove All Comment in Starter Counter App Instantly

How did I get into IT?

Digital aesthetics — the primacy of codes, experience, movement and affect.

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

More from Medium

CQRS Pattern Implementation

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

Microsoft .NET challenge France 2020 final

Building GraphQL API With .Net 5 — EF Core And Hot Chocolate