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
Doorkeeper Tutorial: • Doorkeeper Devise API ...
Starter Code: github.com/Deanout/doorkeeper...
Finished Code: github.com/Deanout/react-wish...
Join this channel to help support these videos:
/ @deanin
Patreon: / deanout
Follow me on social media:
linktr.ee/deanin
Join this channel to get access to perks:
/ @deanin
If you liked this video, please consider subscribing: t.co/RZ4EwP0F2a
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
#Deanin #React #Rails

[@matthewruvalcaba9735]

Dammm, this you made this fast! Thank you so much for sharing.

[@Deanin]

Happy to share! It was a really busy weekend trying to get this to work haha.

[@marcusl16]

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

[@Deanin]

Hahaha I don't know about reading minds, but I try to cover what I think everyone needs to know. 🙂

[@nadbwah282]

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

[@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

[@astro_roman]

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

[@Deanin]

It was definitely a learning weekend trying to get this to work 😅

[@alexandremorey8993]

Can't wait!

[@Deanin]

Hopefully KZbin doesn't take a day to process the HD version again 😭

[@guknj]

Many thanks man! You're a beast!

[@anselemodimegwu6532]

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

[@Deanin]

Really happy that it worked for you!!

[@anselemodimegwu6532]

@@Deanin It was not easy to implement as I did not use the latest version of redux.

[@josbexerra8115]

Excelente Mister Dean....

[@cbbcbb6803]

Time for an updated version of this series.

[@income3000]

Thank you master

[@Deanin]

Thank you for watching 🙂

[@income3000]

@@Deanin I wish I would of found you before I went to a coding boot camp

[@Deanin]

Better late than never. Just consider it all a part of what makes you the developer you are at the end of the day. But this is probably the highest praise I've heard in a long time. Makes me feel like the content I'm making can compete with bootcamps haha. Thank you!

[@Papaize123]

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 ?

[@Deanin]

Happy to make the content! I've never used Strapi, so I can't say. It'll ultimately depend on what the scope of the project is, and if either can fulfill the requirements. Aside from that, it's whatever you think would be easier to manage. Personally I'd probably lean towards Rails, but that's just because the other is an unknown for me. And then it's just a matter of if the project scales, which would handle the scaling better. Which would let you hire developers more easily. Which one could handle future requirements better, etc. Those are all things you'd probably want to look at between the two while making that decision.

[@amirzahran2394]

Will it be a new series react and rails?🥳

[@Deanin]

Hopefully it'll become a series 🙂

[@reyesd3v]

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

[@kriskis9774]

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

[@cesaralves2303]

I'm getting a Argument of type 'AsyncThunkAction' 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?

[@bypang1226]

try to replace const dispatch = useDispatch() to const dispatch = useDispatch();

[@christianmoreno8815]

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

[@BenLimpic]

what is this... a tutorial for 🐜🐜