React SDK - onRedirectSuccess not called after login

phoebe

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!

dan

Hi @phoebe,

Thanks for using FusionAuth!

Did you get this resolved? We have a simple react application tutorial here which uses the react SDK. I'd be interested in knowing if deploying that application to Azure SWA has the same issue.

If it does, then maybe there's some additional configuration that needs to be set or a change to the React SDK that is needed. If it doesn't, maybe there's an issue with the react app you wrote.

Also, are you seeing any messages in the JavaScript console?