API User Accounts For React | React On Rails 7 WishList Part 1

This tutorial covers using Doorkeeper to allow users to login to a backend Rails application as well as through a React frontend application that persists sessions through refreshes! We cover React Authentication, routing, private and public routes, login/logout and signup functionality.

We also cover Redux, TypeScript, Axios, DotEnv and more. This is all used together with the Doorkeeper gem to allow our Devise users to login to multiple applications with the same credentials. Sessions are persisted through the use of Doorkeeper's client ID, client secret combination coupled with revolving refresh tokens that expire and access tokens that are only stored in memory.

Links
Join this channel to help support these videos:

Follow me on social media:

Join this channel to get access to perks:

Timestamps
0:00 Project Demo And Explanation Of How Backend Works
10:45 Cloning The Backend Rails Doorkeeper Template
11:15 Structuring A React On Rails 7 Project With Git
13:07 Creating The React Frontend App With Redux And TypeScript
15:42 Setup And Seed Rails App With React Client ID And Client Secret!
17:52 Starting The React Frontend And Checking Out The Template
18:36 Moving Features Into The App Folder
20:54 Adding The Material UI Navbar/AppBar To The React App
22:24 Fixing The ‘React’ must be in scope when using JSX ESLint Error
23:21 Install React Router Dom v6
23:48 Run React On Different Port (3001) Permanently
24:23 Routing A React App With Private Routes
26:39 Creating The Stubbed Out React Components
29:44 Creating Private Routes In React
32:13 Creating The Persist Login Component (Stay Logged In On Refresh!)
35:09 Redirecting To Login Page When Not Logged In
39:10 Creating The React Login Page!
53:32 Login Page Handle Submit Function
57:15 Create Login And Signup Routes
58:15 Public Routes – Only Accessed While Logged Out
1:00:36 Creating The React Signup Page!
1:07:06 Creating The Redux Session Slice Store
1:14:01 SignupUser Session Slice
1:16:52 Creating The Frontend API With Axios
1:18:10 Storing React Environment Variables With DotEnv
1:20:24 Create The Session API
1:23:29 SignupUser Session Cases
1:26:31 Calling Signup User From The Signup Page!
1:27:31 Persisting Refresh By Requesting Access Token With Refresh Token
1:32:48 Get Current User From API
1:34:19 Finish Renewing Refresh/Request Access Token
1:37:13 Display Session Info On Dashboard
1:39:28 Adding Session Manager To Appbar/Navbar
1:45:47 Implement Logout Functionality
1:50:24 Create Link To Dashboard
1:52:31 Create Login Session Slice API Logic
1:57:52 Reset Error Messages On Reload

#Deanin #React #Rails

[marcusl]

Mr. Dean reads our minds always bringing the most required stuff on ror development, is just amazing

[matthewruvalcaba]

Dammm, this you made this fast!

Thank you so much for sharing.

[Deanin]

Thank you to the channel members/patrons for supporting the channel. As a thanks, here is the longest list of timestamps I've ever created:
TIMESTAMPS
0:00 Project Demo And Explanation Of How Backend Works
10:45 Cloning The Backend Rails Doorkeeper Template
11:15 Structuring A React On Rails 7 Project With Git
13:07 Creating The React Frontend App With Redux And TypeScript
15:42 Setup And Seed Rails App With React Client ID And Client Secret!
17:52 Starting The React Frontend And Checking Out The Template
18:36 Moving Features Into The App Folder
19:07 Deleting The React App.css
19:22 Set Up The Index.tsx File In React With root.render instead of ReactDom.render
20:54 Adding The Material UI Navbar/AppBar To The React App
22:24 Fixing The ‘React’ must be in scope when using JSX ESLint Error
23:21 Install React Router Dom v6
23:48 Run React On Different Port (3001) Permanently
24:23 Routing A React App With Private Routes
26:39 Creating The Stubbed Out React Components
29:44 Creating Private Routes In React
32:13 Creating The Persist Login Component (Stay Logged In On Refresh!)
35:09 Redirecting To Login Page When Not Logged In
39:10 Creating The React Login Page!
53:32 Login Page Handle Submit Function
57:15 Create Login And Signup Routes
58:15 Public Routes – Only Accessed While Logged Out
1:00:36 Creating The React Signup Page!
1:07:06 Creating The Redux Session Slice Store
1:14:01 SignupUser Session Slice
1:16:52 Creating The Frontend API With Axios
1:18:10 Storing React Environment Variables With DotEnv
1:20:24 Create The Session API
1:23:29 SignupUser Session Cases
1:26:31 Calling Signup User From The Signup Page!
1:27:31 Persisting Refresh By Requesting Access Token With Refresh Token
1:32:48 Get Current User From API
1:34:19 Finish Renewing Refresh/Request Access Token
1:37:13 Display Session Info On Dashboard
1:39:28 Adding Session Manager To Appbar/Navbar
1:45:47 Implement Logout Functionality
1:50:24 Create Link To Dashboard
1:52:31 Create Login Session Slice API Logic
1:57:52 Reset Error Messages On Reload

[nadbwah]

Oh my ! What a great video! I wanna grab my laptop and code till the sun sets 🙏❤️

[anselemodimegwu]

I just built a full authentication and routing system for a project, all thanks to this tutorial. Good job Deanin

[astro_roman]

This is so cool Dean! Huge thank you🚀
Today is gonna be a learning evening!

[reyesdv]

Would this work with React Native to be able to log in to the same user for both a web and mobile app?

[Papaize]

thanks for the content man, I want to build a LMS for an educational company, Im thinking in using NextJs on frontend. I'm in between rails backend or strapi, what do you recommend ?

[cbbcbb]

Time for an updated version of this series.

[amirzahran]

Will it be a new series react and rails?🥳

[kriskis]

Does anybody know if there is a way to display Devise flash messages in React component?

[cesartalves]

I'm getting a Argument of type 'AsyncThunkAction<any, UserLoginData, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction' on the Signup / HandleSubmit function at await dispatch(signUpUser(payload)) as any. Any clues on the problem?

[christianmoreno]

hello my friend, are there jobs that use rails with angular?