An Interest In:
Web News this Week
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
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 users 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.
Original Link: https://dev.to/danial2026/authentication-service-with-spring-boot-and-react-client-part-2-1dnk
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To