Authentication Service with Spring Boot and React client — Part 2

part 1:

Authentication Service with Spring Boot and React client

Introduction

In the Part 1, we implemented an authentication service using Spring Boot on the backend and ReactJS on the frontend. And in this part, we will add a redirect page, which enables the authentication of users in other clients by utilizing the JWT token saved within the auth client.

Implementing the Redirect page in Auth Service

Create a new file called redirect.js in the auth directory and add the following code:

import React, { useEffect, useState } from "react";

function RedirectPage({ match }) {
  useEffect(() => {
    // Get the query parameters
    const urlParams = new URLSearchParams(window.location.search);
    const redirectParam = urlParams.get("redirect");

    // Get user's accessToken
    const accessToken = localStorage.getItem('accessToken');

    if (accessToken && redirectParam) {
      // Redirect to the link with token as param
      const redirectLink = `${redirectParam}?token=${accessToken}`;
      window.location.href = redirectLink;
    } else {
      // Redirect to main page if user is not logged in
      window.location.href = "/";
    }
  }, []);

  return <div></div>;
}

export default RedirectPage;

By utilizing the useEffect hook, we can ensure that the redirection logic is executed as soon as the redirect page is loaded.

First, get the redirect URL from the query parameters using URLSearchParams . If no URL is provided, user is redirected to the login page.

Next, retrieve the user’s token from local storage. Then check if the user is logged-in and the redirect parameter is available. If both conditions are true, the user is redirected to the URL, along with the JWT token included as a query parameter.

Using the Redirect Page in Another Service

To use the redirect page in another service, we need a link to the redirect page in our service, and a login page that accepts the access token as a query param.

For example, in our chat service at https://chat.danials.space, we use this component for login:

<a href="https://auth.danials.space/redirect?redirect=https://chat.danials.space">Login</a>

And for login page, create a new file called login.js and add the following code:

import React, { useEffect, useState } from "react";

function LoginPage({ match }) {
  useEffect(() => {
    // Get the query parameters
    const urlParams = new URLSearchParams(window.location.search);
    const redirectParam = urlParams.get("token");

    if (redirectParam) {
      // Save user's accessToken
      localStorage.setItem('accessToken', redirectParam);

      // Redirect to main page if user is not logged in
      window.location.href = '/';
    } else {
      // Redirect to main page if user is not logged in
      window.location.href = "/";
    }
  }, []);

  return <div></div>;
}

export default LoginPage;

After the user is redirected to this page with their token, the token is automatically saved in local storage for future use, ensuring a secure and seamless user experience.

In conclusion

The redirect page fetches the token from local storage and redirects authenticated users to the requested URL with the token as a query parameter, and redirects unauthenticated users to the login page, providing added security and a seamless user experience.