React Authentication Crash Course With Firebase And Routing

🚨 IMPORTANT:

Authentication is crucial for nearly every application. It can also be incredibly difficult to create a good authentication solution. This is where firebase comes in. Firebase makes it incredibly easy to create a secure authentication solution, and in this video I will be showing you how to setup firebase auth with React.

📚 Materials/References:

🧠 Concepts Covered:

- How to setup firebase auth
- How to use firebase in React
- How to setup secure Firebase in React

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:43 - Demo
01:38 - Firebase Setup
08:36 - Signup Component
16:03 - Auth Context Setup
20:20 - Signup Component Functionality
25:28 - Auth Loading State
27:11 - Routing Setup
30:11 - Login Component
32:32 - Marker 9
35:44 - Dashboard Component
39:15 - Logout Functionality
41:02 - Private Routes
43:38 - Password Reset
49:17 - Profile Update
55:46 - Outro

#FirebaseAuth #WDS #ReactJS

[shadmanrahman]

Due to some updates on firebase you can't import firebase like this (import firebase from 'firebase/app') anymore,
rather use this ( import firebase from 'firebase/compat/app' ).
Same for auth ( import 'firebase/compat/auth' )

[GrayFox]

42:48 for anyone stuck with the private route on v6, routes and route components have since changed so this won't work. Also the "Redirect" component will not work. Instead use this for your private route:
import React from "react";

import { Navigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";

export default function PrivateRoute({ children }) {
const { currentUser } = useAuth();

return currentUser ? children : <Navigate to="/login" />;
}

Then this for the dashboard element in your app.js:
<Route path="/"

element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
></Route>

[wndrod]

If you are getting 'Firebase: Error (auth/invalid-api-key)', this is caused by your react app not detecting your '.env.local' file. For some reason, this file needs to be placed in the root directory of your app instead of the '.src' folder.

Also, in the latest version of react, 'Switch' has been replaced by 'Routes' and you can not use the 'component' prop anymore. It must replaced with 'element' as such:

<Routes>
<Route path="/signup" element={<Signup />} />
</Routes>

Also, 'useHistory()' is replaced by 'useNavigate()'. Use 'const navigate=useNavigate()' and 'navigate('/')' instead of 'const history=useHistory()' and 'history.push('/')'.

'Redirect' has been replaced by 'Navigate'.

[d.n.ctalop]

Every time I need something, kyle just uploads a video about that, its crazy.

[PakuBaku]

If you have a error with the Switch Module you need to rename it. In the newer react-router-dom versions it was renamed from "Switch" to "Routes" and you have to declare the Route differently now. Instead of " <Route path="/signup" component={Signup}/> you have to write:
" <Route path="/signup" element={<Signup/>}/>

[codigodesenior]

Hello, I'm a Brazilian programmer, I'm 14 years old and you're helping me a lot, your speech is clean and clear, this is helping me to learn English :)

I just got to know your channel and I'm loving it, continue with your great work, which helps thousands of people like me.

One day I intend to meet you!

[HallOfThought]

That was an extraordinary performance!
I have rarely ever had any instructor get through so much material in such a condensed manner and still remain coherent.

[danielhayes]

Keep in mind that if you're using Material UI, you'll have to use inputRef={whateverRef} instead of ref={whateverRef} as the TextField attribute.

[erikbachryhl]

I spent way too long on error debugging at 24:35 until I found out that the error I was getting was caused by the fact that Firebase has built in password requirements (at least 6 characters long and so forth).

Hope someone finds this helpful ;)

[naampondpat]

Thank you, Kyle - I was struggling with auth process and wanted to find something that's easy to implement
high-quality content, nice and clean code - right on point just what I need :)
love the way you implement bootstrap in react

[davidsaint]

I used to dread setting up authentication on react applications, but seeing your nice patterns has made it a lot easier.

[alexzimmerman]

We need an updated version for this soooo bad

[knaz]

I know I'm late to the party but this was a really good video! Can't say I understood everything perfectly but I typed every single line of code along with the video (pausing to keep up with Kyle) and it all works great!

Definitely going to take your full courses. All of them. Would love to know more about react and more advanced things like how to switch from dev to prod, using this routing for sites that have a lot of pages (I hope it doesn't get too ugly!), etc.

[Aaronmoreno]

I just implemented this in a recent app, but it's really cool to see how you approach it. I may need to do some refactoring now

[tevinmorake]

Aftera few years of React experience, I thoroughly enjoyed and learned some new stuff in this video. Thanks Kyle

[xyntax]

Just got through the intro and love the way you're straight to the point while still sharing some information.

[augedoo]

My God! I went through multiple resources online this morning to lookup how to set up firebase with react and now Kyle post a vid on this topic.
God is amazing.

[holdengjuka]

For anyone having troubles with getting the database url, just leave it blank if it isn't provided by firebase on setup. I'm not entirely sure how it works, but it think it's for the real-time database or something but if you don't have one setup you can just leave the field blank like this:
with no quotations for a string or anything. Please lmk if this doesn't work or if you have a better understanding, I would love to hear.

[lowkyio]

Just ported all of this to Nextjs for a starter template. Thank you for the content and keep it up! Your calm demeanor makes it really easy keep coding <3

[mod__]

Subscribed. I love your videos and how much work you put in to help everyone out. The real og.