In today's article, I will show you how you can set up an automatic redirect to a secured/restricted page in your react application after the user is authenticated.

INTRODUCTION

Let's assume that in your app, you have a page that needs authentication before a user will be able to access it, for example, the dashboard. This means that before a user is allowed to access the dashboard, he must be logged in.

Now, What if for any reason (session timeout, expired cookie, etc.), the user logs out of the app, but needs to revisit that same page on the dashboard? Or maybe he tries to visit information on the dashboard by clicking on the link from an email sent to him? How would you redirect this user back to the link he tried to visit after authentication?

This question will immediately make you understand that it is not enough to ask a user to log in before he can access a restricted page. But you should also redirect the user to the restricted page immediately after he is authenticated.

STILL CONFUSED? LET ME EXPLAIN BETTER

So I have this page http://my-website.com/dashboard/update-profile that needs the user to be authenticated before he is allowed to visit it. Whenever a user that is not authenticated tries to visit it, he will be redirected to http://my-website.com/login

Now the goal is to preserve this URL http://my-website.com/dashboard/update-profile so that when the user is authenticated successfully, he will be redirected back to it.

I will show you how you can achieve this in your React App, and if you should understand the logic, you can implement it anywhere!

USING A QUERY PARAMETER

In this approach, I will check if the user is not logged in, then retrieve the URL he is trying to visit, store it in the query parameter next, and then redirect him to the login page. If authentication is successful, I will redirect him back to the URL in the next query parameter.

Place this code on a secured/restricted page (a page that requires authentication)

To achieve this, the first thing that I need to do is to check if the user is not logged in.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //----
        }
    }
}, []) //make the function run only once when the component mounts

Now we need to create a new URL object with the link that this user will be redirected to in order to get authenticated.

In my case, it will be the /login page and the reason why I am creating a new URL object with it is that I am going to manipulate the link by adding a query parameter later on.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //create a URL object with the Login Link
            const loginUrl = new URL('http://my-website.com/login');
        }
    }
}, []) //make the function run only once when the component mounts

Now before we continue, we need to make sure that the user is trying to visit a restricted page in the dashboard. We can do that by checking if the current URL contains /dashboard.

I will use a regular expression inside the match method to perform this search on the current URL.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //create a URL object with the Login Link
            const loginUrl = new URL('http://my-website.com/login');
            //check if user is trying to access dashboard without logging in
            if(window.location.href.match(new RegExp('/dashboard', 'i'))){
                //---
            }
        }
    }
}, []) //make the function run only once when the component mounts

Now we need to append the link the user tried to visit as a query parameter to the URL object we created earlier, and then redirect the user to the full URL from this URL object.

useEffect(() => {
    isAuthenticated().then(res => {
        //check if user is not logged in
        if(!res){
            //create a URL object with the Login Link
            const loginUrl = new URL('http://my-website.com/login');
            //check if user is trying to access dashboard without logging in
            if(window.location.href.match(new RegExp('/dashboard', 'i'))){
                //Get the url he wanted to visit
                const next = window.location.href
                //append it to the URL object
                loginUrl.searchParams.append('next', next);
            }
            //redirect the user to the full URL from the URL Object
            window.location.href = loginUrl.href.toString()
        }
    }
}, []) //make the function run only once when the component mounts

Here's what we have done so far.

When a user that is not authenticated tries to visit any page in the dashboard for example http://my-website.com/dashboard/update-profile, he will be redirected to http://my-website.com/login?next=http://my-website.com/dashboard/update-profile.

Now, here's something to have in mind.

The browser will try to encode the value in the next query parameter because it is a URL and before we access this value, we need to decode it.

On my end, here's what my address bar looks like

It is time for us to handle the redirect if the user becomes authenticated.

HANDLING THE REDIRECT

Now on your login page, we will create a variable that will store the default link the user will be redirected to if authentication is successful.

We will also import useLocation from react-router-dom so that we can be able to read the current URL and check if it contains a search (query) parameter.

import {useLocation} from 'react-router-dom';

export default function Login(){
  //invoke the function
  const location = useLocation();
  //default page to redirect user after login
  let redirect = 'http://my-website.com/dashboard/home';
  //check if there's search param in the URL
  if(location.search){
    //---
  }
}

If you don't want to use the useLocation module to read the current URL, you can equally access the current URL directly using JavaScript.

export default function Login(){
    //default page to redirect user after login
    let redirect = 'http://my-website.com/dashboard/home';
    //create a URL object using the current url
    const url = new URL(window.location.href)
    //check if url contains a search parameter
    if(url.search){
        //---
    }
}

Whichever method you choose to use, the next thing to do is to read the search parameters and check if it contains next.

If it contains next, we will decode the value and reassign the value of the redirect variable to this URL.

You can also perform a search to check if the decoded value contains /dashboard.

export default function Login(){
    //default page to redirect user after login
    let redirect = 'http://my-website.com/dashboard/home';
    //create a URL object using the current url
    const url = new URL(window.location.href)
    //check if url contains a search parameter
    if(url.search){
        //read the search parameters
        const search = new URLSearchParams(url.search)
        //check if next parameter is present
        if(search?.get('next')){
            //decode it
            const next = decodeURIComponent(search.get('next'))
            //check if dashboard is present in the URL
            if(next.match(new RegExp('/dashboard', 'i'))){
                redirect = next;
            }
        }
    }
    //after authentication, redirect users to the redirect variable
    //window.location.href = redirect;
}

So after authentication, you should redirect your users to the value of the redirect variable, which is the decoded URL!

Watch my implementation below

A LITTLE TIP

If you want to make your redirects cleaner, you can store the URL in the browser's sessionStorage and when you validate it, you can go ahead and delete it from the session storage, then redirect the user to the URL.

Thank you for reading.

Psst! I'm open to gigs on web development and Technical Writing!

EXTRA

I built a JavaScript Library that is capable of validating your front-end forms using regular expressions, validation rules, and form input attributes.

Check out this library on GitHub

<script src="https://unpkg.com/octavalidate@latest/native/validate.js"></script>

Check out the Documentation

Octavalidate - JS | Getting Started

Octavalidate - JS: This JavaScript Library helps to validate your HTML forms using validation rules, sophisticated regular expressions and form input attributes

octagon-simon.github.io

Photo Credit: Hal Gatewood On Unsplash