Greetings!
I am building a React app that uses the Authorization Code grant to authenticate users. My React app is hosted via Azure Static Web Apps. I experience this issue when my app is deployed and served from the Azure SWA, but not when the app is running on my local machine.
After my server redirects the web browser back to the site ( after the callback function resolves ), the handleRedirectSuccess function never fires. The query string passed via the uri hangs in the address bar and if I attempt to navigate to the authenticated portions of my site, I am denied access.
I think there is a problem with my application where the <FusionAuthProvider /> component is not handling the redirect after the browser returns from my server.
Here is the code for my AuthProvider component:
import React from 'react';
import {useNavigate} from "react-router-dom";
import { FusionAuthProvider, RedirectFail, RedirectSuccess } from "@fusionauth/react-sdk";
import { AuthConfig } from './AuthConfig'
interface props {
children: React.ReactNode;
}
const AuthProvider: React.FC<props> = ({children}) => {
const navigate = useNavigate();
console.log(`Client ID: ${AuthConfig.clientID}`)
console.log(`Redirect URI: ${AuthConfig.redirectUri}`)
console.log(`Server URL: ${AuthConfig.serverUrl}`)
// If a redirect is successful, land on the proper page
const handleRedirectSuccess: RedirectSuccess = () => {
console.log(`Redirect success`)
navigate('/portal/dashboard');
};
// If there is a failure, land on the proper page
const handleRedirectFailure: RedirectFail = error => {
console.error(error);
window.alert(`Oh no!! Something wrong... :( Problem: ${error}`);
};
return(
<FusionAuthProvider
{...AuthConfig}
onRedirectSuccess={handleRedirectSuccess}
onRedirectFail={handleRedirectFailure}
>
{children}
</FusionAuthProvider>
)
}
export default AuthProvider;
Is there anything I could be doing wrong? How can I encourage the Auth Provider to handle the login result? Why does this issue persist on Azure SWA but not on my local machine?
I have tested this by deploying my app via a storage account as well, and the issue still persists on both. handleRedirectSuccess only works on my local machine.
I'm going to be scanning through the react sdk source to try and identify the issue. Any help is appreciated! Thanks!