AuthVerify.jsx (1530B)
1 import { useState, useEffect } from 'react' 2 import { CookiesProvider, useCookies } from 'react-cookie' 3 import { useNavigate } from "react-router-dom" 4 5 const api_uri = import.meta.env.VITE_API_URI 6 const api_port = import.meta.env.VITE_API_PORT 7 const session_ttl = import.meta.env.VITE_SESSION_TTL 8 9 function AuthVerify() { 10 const [loading, setLoading] = useState(true) 11 const [session, setSession, removeSession] = useCookies(['auth']) 12 const queryParameters = new URLSearchParams(window.location.search) 13 const token = queryParameters.get("token") 14 const navigate = useNavigate() 15 16 useEffect(() => { 17 (async () => { 18 // check token validity on API endpoint 19 const response = await fetch(`${api_uri}:${api_port}/v1/auth/verify?token=${token}`) 20 const { message, data, error } = await response.json() 21 22 if (error) { 23 alert(error) 24 } else { 25 // Set client session (https://www.npmjs.com/package/react-cookie) 26 setSession('auth', data, { 27 path: '/', 28 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value 29 sameSite: 'strict', 30 secure: process.env.NODE_ENV !== 'development', 31 maxAge: parseInt(session_ttl), 32 }) 33 34 // Redirect if everything ok. Use navigate in an effect: 35 // https://reactrouter.com/en/main/hooks/use-navigate 36 return navigate("/"); 37 } 38 })(); 39 }, []); 40 41 return ( 42 <div className="AuthVerify"> 43 </div> 44 ) 45 } 46 47 export default AuthVerify;