I am trying to implement SSO with SAML 2.0 in a React application with .NET 7 as the back end. With this documentation from Okta I was able to create a SAML authentication in .NET 7 and it works fine with Razor pages. But I am not able to figure out how to add React into this. When I try to redirect from front-end to back-end, it enters an infinite loop. Here’s a snippet from my React code:
const App: React.FunctionComponent<IApplicationProps> = props => {
const [loading, setLoading] = useState<boolean>(true);
const [email, setEmail] = useState<string>('');
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
const jwtToken = urlParams.get('jwt');
debugger;
if (jwtToken) {
// Store the JWT token in local storage or a secure client-side storage
// for further use in API calls or authentication checks
localStorage.setItem('token', jwtToken);
debugger;
// Make API calls or perform authentication checks using the JWT token
axios({
method: 'GET',
url: 'https://localhost:44379/auth/check',
withCredentials: true,
headers: {
Authorization: `Bearer ${jwtToken}`,
},
}).then((response) => {
debugger;
console.log("aa",response);
if (response.data !== "") {
const { user } = response.data;
setEmail(user);
setLoading(false);
} else {
RedirectToLogin();
}
})
.catch((error) => {
console.error(error, 'SAML');
RedirectToLogin();
});
} else {
RedirectToLogin();
}
}, []);
const RedirectToLogin = () => {
window.location.replace('https://localhost:44379/auth/login');
}
if (loading)
return <p>loading ...</p>
return (
<p>Hello {email}!</p>
);
}
export default App;
Any help would be really appreciated.