How can I use passportjs and reactjs together?

Question

I have 3 views, (Home, signup, login)made in reactJs, I want to use passport in my project but I dont know how to do it, I have passport configurated and it url is working.

What can I do to manage the session and the user data like we do in ejs or jade?

Answer 1

• Use componentDidMount/useEffect to get authentication status. Set status in react state.
• If not authenticated, Show the link to Login/Signup page or redirect.
• If authenticated, you can return additional protected data or show the link to the protected page.(When showing private data, check authentication status on every page by using componentDidMount/useEffect)

Client-side example

import React, { useEffect, useState } from 'react'; import { Link } from "react-router-dom"; import axios from 'axios';  function Home() {    const [loggedIn, setLoggedIn] = useState(false);    useEffect(() => {     axios.get('/checkAuthentication')       .then(res => {         setLoggedIn(res.data.authenticated);       })       .catch((error) => {         setLoggedIn(false)     });   }, []);    return (     <div>       {loggedIn ? (         <p>Login success</p>       ) : (         <div>           <Link to="/signup">            Signup           </Link>           <Link to="/login">             Login           </Link>         </div>       )}     </div>   ); }  export default Home; 

Server-side example (req.user must be populated if you set up passport)

app.get("/checkAuthentication", (req, res) => {   const authenticated: boolean = typeof req.user !== 'undefined'    res.status(200).json({     authenticated,   }); }); 

Answer 2

You can Use passport.js with node.js and also can use jsonwebtoken ,i personally use that very usefull simple to code and pretty secure and easily can use to frontend with react or any other frontend framework . The best thing is backend :-> node.js + passport.js + jsonwebtoken frontend :-> react/ any other framework + redux it works really awesome.