Firebase 9 Authentication using React-Router v6

Firebase has a huge impact on web engineers in that development cost is surprisingly getting less to develop. We can focus on services, front-end, and design If we use it. But now, firebase and react-router have been upgraded to version 9 and 6 respectively. So the interface and name of variables have been changed significantly, so the old code won’t work as it is. I’ll show you a code that translated the version of the below code on GitHub using the latest Firebase and React-Router.
https://github.com/WebDevSimplified/React-Firebase-Auth
This code is introduced on a youtube video from “Webdev Simplified”

The “Webdev Simplified” is a great channel for web engineers. I watched this channel sometimes when I am interested in it.

My whole code is here.
https://github.com/kevin-tofu/ReactFirebase-Auth

Firebase

// In version8, you can call functions in object (auth) thru as methods.
// Firebase version 8
```
auth.signInWithEmailAndPassword(email, password)

```

// In version9, you need to import functions from firebase-package. 
// Firebase version 9
```
import { signInWithEmailAndPassword} from "firebase/auth";
```

React-Router

Not only for the name of variables, but also way of using get quite different.
Here shows example.

 // In version 5
```
<Switch>
  <PrivateRoute exact path="/" component={Dashboard} />
</Switch>
```

// In version 6
// You should set Routes directly as child on Routes.
```
<Routes>
  <Route exact path="/"
               element={<PrivateRoute><Dashboard/></PrivateRoute>}
  />
</Routes>
```

// In version 5
```
const history = useHistory()
history.push("/")
```

// In version 6
```
const history = useNavigate()
history('/')
```

// In version 5
```
<Switch>
</Switch>

```

// In version 6
```
<Routes></Routes>
```