Authentication in React

Articles & Tutorials

How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify (freecodecamp.org)
Sep 11, 2019
When interacting with a backend, a JAMstack app can do everything a mobile app can do, without the tyranny of the app store. This is a fundamental insight that goes as deep as the fight for a more open, secure, decoupled, faster web.
Build a Mobile Phone Authentication Component with React and Firebase (blog.bitsrc.io)
Aug 13, 2019
Learn how to build a reusable phone authentication component with React and Firebase.
  • Krissanawat Kaewsanmuang
useAuth – the simplest way to add authentication to your React app (swizec.com)
Aug 09, 2019
useAuth is the simplest way to add authentication to your React app. Handles everything for you – user management, cookies, sharing state between components, login forms, everything you need to get started.
Securing a React app with a basic server-side authentication (blog.logrocket.com)
Jul 01, 2019
This article will walk you through how to do that through basic authentication for an Express server. Although the client side will be a React app, you can virtually apply it to any other client-side applications.
  • Dogcan Bilgili
Handling Authentication in React with Context and Hooks (auth0.com)
May 27, 2019
Learn how to handle identity management in React by creating a global state for your authentication details with Context and update these details with Hooks.
  • Roy Derks
Authentication in React Applications (kentcdodds.com)
May 20, 2019
How to handle user authentication in modern React Applications with context and hooks.
Next.js Authentication Tutorial (auth0.com)
May 13, 2019
Learn how to add authentication to your Next.js application with Passport.
  • Bruno Krebs
How to set up Twitter OAuth using Passport.js and ReactJS (medium.freecodecamp.org)
May 03, 2019
This is a simple authentication tutorial for building a Twitter Authentication web application using Passport API. It’s a side project that I worked on for education purposes.
  • Leanne Zhang
Securing Gatsby with Auth0 (auth0.com)
Apr 24, 2019
Learn how to set up Auth0 for identity management in a Gatsby static site.
  • Sam Julien
How to set up GatsbyJS authentication with Auth0 (medium.freecodecamp.org)
Mar 11, 2019
In this tutorial, I’ll be showing you how to use Auth0 which is an authentication and authorization platform to add authentication to your GatsbyJS application and to your serverless function on Netlify.
  • Michael Ozoemena
User Authentication with Next.js (jolvera.biz)
Feb 20, 2019
User authentication with Next.js has been one of the most requested examples by the community. The GitHub issue had more than 300 likes and hundreds of comments with recommendations and proposals.
  • Juan Olvera
Using Auth0 Rules with a React App (auth0.com)
Feb 19, 2019
Learn how to integrate React and Auth0 Rules to enrich the profile of your users.
  • Sarah Jorgenson
How to Build React Apps Using Auth0 Popup Implementation + React Hooks (auth0.com)
Jan 09, 2019
Learn how to build a React application using React Hooks and add Authentication with Auth0, utilizing a popup login modal window.
  • Sarah Jorgenson
Email Verification with Firebase in React (robinwieruch.de)
Dec 20, 2018
A Firebase React tutorial on how to enable email verification. Only users that confirmed their email address with a email confirmation have access to your application.
Firebase Login with Facebook (robinwieruch.de)
Dec 07, 2018
A tutorial on how to activate Facebook login for Firebase or Firestore where no email is required.
Firebase Login with Twitter (robinwieruch.de)
Dec 07, 2018
In this short visual guide, I want to show you how to activate the Twitter authentication for your Firebase or Firestore application.
How to link Social Logins with Firebase in React (robinwieruch.de)
Dec 06, 2018
A Firebase React tutorial on how to link social logins with each other under one account. The example covers linking Google, Facebook, Twitter and email/password sign in methods.
Social Logins in Firebase React: Google, Facebook, Twitter (robinwieruch.de)
Dec 02, 2018
A tutorial on how to use social a login with Firebase in React. The example covers Google, Facebook and Twitter logins for user authentication.
React Firebase Auth Persistence with Local Storage (robinwieruch.de)
Nov 27, 2018
A tutorial on how to use local storage for auth state persistence for a Firebase in React application. When reloading the browser, the user should stay authenticated without a flicker.
React Firebase Authorization with Roles (robinwieruch.de)
Nov 26, 2018
A tutorial on how to use authorization with roles and permissions when using Firebase in React. Learn how to protect routes with authorization rules and how to set properties to Firebase user.
Passwordless Authentication in React Native Using Facebook Account Kit (Part 1) (medium.com)
Nov 01, 2018
Using this authentication method we reduce the risk of massive sign-ups, since every user must provide a valid phone number, which isn’t as easy to obtain as email accounts.
  • Juan Pablo Garcia
User Accounts with Next.js — An Extensive Tutorial (medium.com)
Oct 19, 2018
There is an issue on the next.js repo that has been open since the early days of the project (October 2016), it’s called Add login / authentication example and is one of 2 issues tagged Priority: OMG Maximum. The issue has 185 comments, many of which mine (I joined the conversation in February 2017).
  • Nick Redmark
Using Next.js and Auth0 (blog.fullstacktraining.com)
May 02, 2018
This guide walks you through setting up authentication and authorisation in an example application created with Next.js and Auth0.
  • Tamas Piros
React Authentication in Depth (hackernoon.com)
Mar 13, 2018
How to do implement world 2 factor authentication (both SMS and TOTP) using React, React Router, and Amazon Cognito
Securing a React Web App With Authorization Rules (medium.appbase.io)
Nov 27, 2017
In this post, we will be building authentication (Who are you?) and authorization (Are you allowed to see this?) flows to a TodoMVC react app.
  • Divyanshu Maithani
Firebase & React Part 2: User Authentication (css-tricks.com)
Jul 07, 2017
Today we'll be adding authentication to our Fun Food Friends app.
  • Simon Bloom

Video Guides & Talks

JWT Authentication Node.js Tutorial with GraphQL and React (youtube.com)
Sep 19, 2019
Learn how to add JWT authentication to your project with this fullstack tutorial using Node.js, Typescript, GraphQL, React, and PostgreSQL.
#2 Expo Google Login + Firebase Real World Example (youtube.com)
Jan 17, 2019
Creating the user in the Firebase Authentication system is just one part of the process. How do we then use the user's details in our Firebase Realtime Database? In part 2 of this 2 part series let's add the logged in user to the firebase database.
  • Varun Nath
#1 Expo Google Login + Firebase Real World Example (youtube.com)
Jan 16, 2019
Most tutorials only teach you how to implement the Google login that's given in the documentation. What do you do after you have logged the user in? Where do you save the user or what credentials do you save?
  • Varun Nath
Authentication Higher Order Component in Next.js (youtube.com)
Dec 29, 2018
How to create an Authentication Higher Order Component in React for Next.js.
React Authentication App With Okta (youtube.com)
Jun 16, 2018
In this video we will build a React app that uses authentication from Otka which is a user management system that can be used across multiple apps built on multiple languages/frameworks.
How to integrate Firebase Authentication with React Router in React 16.3 (youtube.com)
May 17, 2018
In this screencast, I'm integrating Firebase Authentication in a React 16.3 project with React Router. I hope that you'll find this video informative.
  • William Candillon
Facebook Login Button In React (youtube.com)
May 11, 2018
In this video we will create a Facebook login button in React to get the users name, email and picture. We will then add it to the component state and render the data. This is an introductory based tutorial.
Logging into Facebook - React Native Tutorial (youtube.com)
Feb 04, 2018
Today we'll be walking through how to use Facebook Authentication in your Expo experience...

Courses & Video Series

React Front To Back 2019 (udemy.com)
Jun 04, 2019
Lean Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects.
Securing React Apps with Auth0 (pluralsight.com)
Nov 29, 2018
This course will teach you how to handle authorization and authentication in your React app
React: SPAs (lynda.com)
Nov 07, 2018
React: SPAs shows you how to build a polished single-page application (SPA), with tools for managing users and reading and writing data from a database
  • Ray Villalobos
Universal JavaScript with Next.js (next.training.leftlogic.com)
Jun 12, 2018
Zero configuration, universal JavaScript web apps with Next.js for React.
  • Remy Sharp
Advanced React and Redux (udemy.com)
May 30, 2018
Detailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and Deployment.
  • Stephen Grider
Modern React with Redux (udemy.com)
Apr 30, 2018
Master the fundamentals of React v16.3.2 and Redux as you develop apps with React Router, Webpack, and ES6.
  • Stephen Grider
MERN Stack Front To Back: Full Stack React, Redux & Node.js (udemy.com)
Apr 15, 2018
Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Learn how to put it all together.
React: Securing Applications (lynda.com)
Jan 31, 2018
Learn how reinforce the security of your React applications, protecting your code, data, users, servers, and more
The Complete React Native and Redux Course (udemy.com)
Nov 14, 2017
iOS and Android App Development from scratch - build full React Native mobile apps ridiculously fast!
  • Stephen Grider
React JS prototyping (youtube.com)
Nov 08, 2017
In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
  • Mattias Petter Johansson
Node with React: Fullstack Web Development (udemy.com)
Jul 26, 2017
Build and deploy fullstack web apps with NodeJS, React, Redux, Express, and MongoDB.
  • Stephen Grider
Building and Deploying a Full-Stack React Application (lynda.com)
Jun 26, 2017
Discover how to architect, create, and deploy a scalable, full-stack React application
  • Carl Peaslee
Firebase + React: Real-time, Serverless Web Apps (frontendmasters.com)
Mar 31, 2017
This course is a must for any React and Redux users who want to integrate with Firebase’s cloud-hosted NoSQL database platform to create robust web and mobile applications!

Libraries

react-google-login-component (github.com)87
v0.9.3
Feb 25, 2018
React Google Component to log users in through Google.
  • Kennet Postigo
  • Konstantin Lebedev