Due to this project using an older package not fully supported on node17+ we'll need to run one initial command before we run our npm install.
If you are on mac or linux, run the following command:
export NODE_OPTIONS=--openssl-legacy-provider
for windows users use one of these two commands:
command prompt:
set NODE_OPTIONS=--openssl-legacy-provider
powershell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"
Components | Links to Code | Description |
---|---|---|
App |
App |
The component that manages the entire app |
Signup |
Signup |
Allow the user to signup |
Login |
Login |
Allows the user to login to the app |
Navbar |
Navbar |
Make App class component |
Profile |
Profile |
A component that displays the user profile information |
setAuthToken |
setAuthToken |
A utility function that adds a token to the Authentication header to manage current user |
About |
About |
A component that decribes the app |
Footer |
Footer |
A footer that goes on each component |
Welcome |
Welcome |
A welcome page for the user |
// Imports
import React, { useEffect, useState } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import jwt_decode from 'jwt-decode';
import setAuthToken from './utils/setAuthToken';
// CSS
import './App.css';
// Components
import Signup from './components/Signup';
import About from './components/About';
import Footer from './components/Footer';
import Login from './components/Login';
import Navbar from './components/Navbar';
import Profile from './components/Profile';
import Welcome from './components/Welcome';
function App() {
// Set state values
const [currentUser, setCurrentUser] = useState('');
const [isAuthenticated, setIsAuthenticated] = useState(true);
}
const PrivateRoute = ({ component: Component, ...rest}) => {
let token = localStorage.getItem('jwtToken');
console.log('===> Hitting a Private Route');
return <Route {...rest} render={(props) => {
return token ? <Component {...rest} {...props} /> : <Redirect to="/login"/>
}} />
}
useEffect(() => {
let token;
if (!localStorage.getItem('jwtToken')) {
setIsAuthenticated(false);
console.log('====> Authenticated is now FALSE');
} else {
token = jwt_decode(localStorage.getItem('jwtToken'));
setAuthToken(localStorage.getItem('jwtToken'));
setCurrentUser(token);
}
}, []);
const nowCurrentUser = (userData) => {
console.log('===> nowCurrent is here.');
setCurrentUser(userData);
setIsAuthenticated(true);
}
const handleLogout = () => {
if (localStorage.getItem('jwtToken')) {
// remove token for localStorage
localStorage.removeItem('jwtToken');
setCurrentUser(null);
setIsAuthenticated(false);
}
}
return (
<div className="App">
<h1>MERN Authentication</h1>
<Navbar handleLogout={handleLogout} isAuth={isAuthenticated} />
<div className="container mt-5">
<Switch>
<Route path='/signup' component={Signup} />
<Route
path="/login"
render={(props) => <Login {...props} nowCurrentUser={nowCurrentUser} setIsAuthenticated={setIsAuthenticated} user={currentUser}/>}
/>
<PrivateRoute path="/profile" component={Profile} user={currentUser} handleLogout={handleLogout} />
<Route exact path="/" component={Welcome} />
<Route path="/about" component={About} />
</Switch>
</div>
<Footer />
</div>
);
// Imports
import React, { useEffect, useState } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import jwt_decode from 'jwt-decode';
import setAuthToken from './utils/setAuthToken';
// CSS
import './App.css';
// Components
import Signup from './components/Signup';
import About from './components/About';
import Footer from './components/Footer';
import Login from './components/Login';
import Navbar from './components/Navbar';
import Profile from './components/Profile';
import Welcome from './components/Welcome';
const PrivateRoute = ({ component: Component, ...rest}) => {
let token = localStorage.getItem('jwtToken');
console.log('===> Hitting a Private Route');
return <Route {...rest} render={(props) => {
return token ? <Component {...rest} {...props} /> : <Redirect to="/login"/>
}} />
}
function App() {
// Set state values
const [currentUser, setCurrentUser] = useState('');
const [isAuthenticated, setIsAuthenticated] = useState(true);
useEffect(() => {
let token;
if (!localStorage.getItem('jwtToken')) {
setIsAuthenticated(false);
console.log('====> Authenticated is now FALSE');
} else {
token = jwt_decode(localStorage.getItem('jwtToken'));
setAuthToken(localStorage.getItem('jwtToken'));
setCurrentUser(token);
}
}, []);
const nowCurrentUser = (userData) => {
console.log('===> nowCurrent is here.');
setCurrentUser(userData);
setIsAuthenticated(true);
}
const handleLogout = () => {
if (localStorage.getItem('jwtToken')) {
// remove token for localStorage
localStorage.removeItem('jwtToken');
setCurrentUser(null);
setIsAuthenticated(false);
}
}
return (
<div className="App">
<Navbar handleLogout={handleLogout} isAuth={isAuthenticated} />
<div className="container mt-5">
<Switch>
<Route path='/signup' component={Signup} />
<Route
path="/login"
render={(props) => <Login {...props} nowCurrentUser={nowCurrentUser} setIsAuthenticated={setIsAuthenticated} user={currentUser}/>}
/>
<PrivateRoute path="/profile" component={Profile} user={currentUser} handleLogout={handleLogout} />
<Route exact path="/" component={Welcome} />
<Route path="/about" component={About} />
</Switch>
</div>
<Footer />
</div>
);
}
export default App;