I have successfully built an application in Express, but I am now transitioning to React, with express serving as an API. My current challenge involves migrating the login page, particularly when it comes to authentication methods:
- Implementing Passport for user authentication
- Utilizing SAML (SSO) for seamless authentication
- For SSO authentication, users are redirected to an external SSO page and then back to the express app.
The login functionality works smoothly in express due to its ability to redirect between pages. However, I'm facing difficulties implementing this feature in React as I can't figure out how to redirect users to the SSO login page (the redirection back is automated by the SSO site).
My current SAML login setup:
router.post('/login',
passport.authenticate('saml', {
successRedirect: '/', // Redirect to home page on success
failureRedirect: 'login', // Redirect to /user/login on failure
})
);
This is the login form for users:
export class Login extends React.Component{
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(){
fetch("http://localhost:3000/auth/login",
{method : 'POST'})
.then(response => alert(response));
}
render(){
return (
<div className="flex h-screen">
<div className="container m-auto max-w-md w-full space-y-8">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Sign in to your account
</h2>
<form className="space-y-6 p-8" onSubmit={this.handleSubmit} id="loginForm">
<div>
<button type="submit">
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
Sign in
</button>
</div>
</form>
</div>
</div>
);
}
Upon clicking the button, the submit handler initiates a POST request, but I'm unsure of how to proceed with authentication once the request is made.
I attempted to add
action="http://localhost:3000/auth/login" method="post"- The redirect back after SSO login doesn't work since it's a post request (contains user info)
- The redirect should be handled by the express server to save cookies, passport data, and complete authentication.
- I'm uncertain if this approach would work on a live domain beyond localhost.
Any suggestions or solutions?
Thank you!