restrict user to go to verification route in react

Question

I am making my first mern app and working on the login and registration part and I am stuck on a problem , the problem is that I made a verification route which pops up when someone registers but I want that no one should be able to go there via changing the URL, I know the concept of private routes but I don't know how to apply it here I mean what condition can I give to stop user to go there , I want that no one should be able to go there until they register.

Routes code:-

import Navbar from "./components/navbar/Navbar";
import Home from "./components/Home/Home";
import 'bootstrap/dist/css/bootstrap.min.css'
import Forgot_password from "./components/login_and_reg/Forgot_password/Forgot_password";
import Weather from "./components/Weather/Weather";
import Landing_page from './components/login_and_reg/Landing_page/Landing_page'
import {
    BrowserRouter as Router,
    Route,
    Routes,
    Navigate
  } from "react-router-dom";
import Verification from "./components/login_and_reg/Verification/Verification";
import Protected_routes from './components/Protected_routes'
import Protected_routes_2 from "./components/Protected_routes_2";
import { useSelector } from "react-redux";

function App() {
    const isloggedin = sessionStorage.getItem('isloggedin');
    const rememberMe = localStorage.getItem('rememberMe')

    
return (
    <>
            <Router>
                {/* <Navbar/> */}
                <Routes>
                    <Route path="/weather" element={
                        <Protected_routes_2>
                            <Weather/>
                        </Protected_routes_2>}></Route>
                    <Route exact path="/" element={<Protected_routes/>}></Route>
                    <Route path="/verify/:first_name/:email" element={<Verification/>}></Route>
                    <Route path="/forgot_password" element={<Forgot_password/>}></Route>
                    {/* <Route exact path="/home" element={<Protected_routes/>}></Route> */}


                </Routes>
            </Router>
                
            
            
        
    </>
);
}

export default App;

What part of code should i give? I have some components which are tied together with Routes — Samyak jain, Jan 31 '22 at 07:35
I think you have a route that is not working properly. give that one — moshfiqrony, Jan 31 '22 at 07:39
hmu on linkedin, i'll help you out https://www.linkedin.com/in/karan-kumar-456098127/ — Karan Kumar, Jan 31 '22 at 14:32

score 0 · Answer 1 · answered Jan 31 '22 at 16:37

If it's a popup/modal/dialog component

There's no need to give it a route. Just call it in the registration page. Doing so, only a registered user will see it.

If it's a well defined page

You can wrap your Verification page in a PrivateRoute with the condition only people coming from /register can access that page.

In this scenario, we assume your registration page is at /registrer and your verification at /verify.

To do that, you will have to:

programmatically navigate to /verify. You'll have to do it while being inside your Register page. useNavigate hook will help.
detect the previous path that has lead to your Verification page. and if it's not /register, redirect to 404 page or login. This logic goes inside the private route that will wrap your Verification page.

Couple of hints to achieve 2., see this related question and/or this react-router issue. They are all about getting previous path in React.

Actually what i need is that , if someone clicks on register button then only /verify route should be allowed — Samyak jain, Feb 01 '22 at 04:51

restrict user to go to verification route in react

1 Answers1