Authentication not completing after log in using Google

Hi,

So I am using Google connection to log into my app but the redirect url is something I want to be different depending on who is logging in. So I have put in the following rule which checks if the email address that the user is logging in is with in the list and if it is then it redirects the user to that url.

function (user, context, callback) {
var whitelist = [‘someemail@gmail.com’];
var userHasAccess = whitelist.some(function (email) {
return email === user.email;
});

if (userHasAccess) {
context.redirect = {
url: ‘http://localhost:3000/
};
}

callback(null, user, context);

My callback urls in the app include localhost:3000/ and localhost:3000/dashboard (the second option that i want the users to be redirected to).

In my react app, I have the following config

const onRedirectCallback = async (appState: any) => {
console.log(appState, " THIS IS THE APPO STATE");
history.push(
appState && appState.returnTo ? appState.returnTo : window.location.pathname
);
};

const config = getConfig();

const providerConfig = {
cacheLocation: “localstorage” as CacheLocation,
domain: config.domain,
clientId: config.clientId,
onRedirectCallback,
authorizationParams: {
redirect_uri: “http://localhost:3000/dashboard”,
audience: “audience”,
scope: “some scope”,
},
};

root.render(

<Auth0Provider {…providerConfig}>



);

So when the rule is enabled and the user correctly gets redirected then I get isAuthenticated as always false and the user as undefined even though there is state in my session storage and in the url of the redirect url. But when I have the rule disabled and the redirecturl is consistent and just one value then I get everything working as expected. Now I understand that maybe the authentication not getting completed is the reason why I am getting this error so am I right in thinking that I need to hit the continue/ endpoint with the state to eventually get authenticated? And if so then how do I retrieve that state value? Getting it from the session storage seems a bit hacky. The following is what I was trying in the App.tsx but I get an error saying invalid state.

useEffect(() => {
handleRedirectCallback(“http://localhost:3000/”).then((response) =>
console.log(response, “VVVVVVVVVV”)
);

}, );

Any help would be appreciated.