can't use fusion auth react sdk when fusion auth server runs locally on fusionauth.localhost:

valerii15298 · 5 Mar 2025, 23:30

I followed react sdk example https://github.com/FusionAuth/fusionauth-quickstart-javascript-react-web/tree/main

I changed in kickstart tenant issuer to

"issuer": "http://fusionauth.localhost:9011"

and variables to

    "allowedOrigin": "http://fusionauth.localhost:4000",
    "authorizedRedirectURL": "http://fusionauth.localhost:4000",
    "authorizedPostLogoutURL": "http://fusionauth.localhost:4000/logged-out",
    "authorizedOriginURL": "http://fusionauth.localhost:4000",
    "logoutURL": "http://fusionauth.localhost:4000",

and started fusion auth in docker compose, also specified env var:

FUSIONAUTH_APP_URL=http://fusionauth.localhost:9011

For react sdk use this config:

const config: FusionAuthProviderConfig = {
  clientId: "e9fdb985-9173-4e01-9d73-ac2d60d1dc8e",
  // even started my app under the same local domain
  redirectUri: "http://fusionauth.localhost:4000",
  postLogoutRedirectUri: "http://localhost:4000/logged-out",
  // serverUrl: "http://localhost:9011", // this one works
  serverUrl: "http://fusionauth.localhost:9011",
  shouldAutoFetchUserInfo: true,
  shouldAutoRefresh: true,
  onRedirect: (state?: string) => {
    console.log(`Redirect happened with state value: ${state}`);
  },
  scope: "openid email profile offline_access",
};

And when I log in and am redirected back to my app, fusion auth hook does not show me that I am logged in(it does not even send any requests I checked network). But when I strip everywhere fusionauth. prefix then everything works fine. Why does not fusion auth work locally with custom domains?

Cookies on my local app fusionauth.localhost:4000 are also saved after I logged in: https://freeimage.host/i/3FVbSJs
And when I click login button again (or invoke startLogin function from useFusionAuth hook) I am redirected right away to the app since I am logged in. But isLoggedIn is false and useFusionAuth hook does not recognize that user is logged in.

(I have mapped fusionauth.localhost to localhost in my hosts file locally)

#docker #react-sdk

mark.robustelli · 6 Mar 2025, 16:04

@valerii15298 If you follow the quickstart exactly, are you able to get it to run?

iclendjanice

@valerii15298 said in can't use fusion auth react sdk when fusion auth server runs locally on fusionauth.localhost::

I followed react sdk example https://github.com/FusionAuth/fusionauth-quickstart-javascript-react-web/tree/main

I changed in kickstart tenant issuer to
"issuer": "http://fusionauth.localhost:9011"
and variables to
    "allowedOrigin": "http://fusionauth.localhost:4000",
    "authorizedRedirectURL": "http://fusionauth.localhost:4000",
    "authorizedPostLogoutURL": "http://fusionauth.localhost:4000/logged-out",
    "authorizedOriginURL": "http://fusionauth.localhost:4000",
    "logoutURL": "http://fusionauth.localhost:4000",
and started fusion auth in docker compose, also specified env var:
FUSIONAUTH_APP_URL=http://fusionauth.localhost:9011
For react sdk use this config:
const config: FusionAuthProviderConfig = {
  clientId: "e9fdb985-9173-4e01-9d73-ac2d60d1dc8e",
  // even started my app under the same local domain
  redirectUri: "http://fusionauth.localhost:4000",
  postLogoutRedirectUri: "http://localhost:4000/logged-out",
  // serverUrl: "http://localhost:9011", // this one works
  serverUrl: "http://fusionauth.localhost:9011",
  shouldAutoFetchUserInfo: true,
  shouldAutoRefresh: true,
  onRedirect: (state?: string) => {
    console.log(`Redirect happened with state value: ${state}`);
  },
  scope: "openid email profile offline_access",
};
And when I log in and am redirected back to my app, fusion auth hook does not show me that I am logged in(it does not even send any requests I checked network). But when I strip everywhere fusionauth. prefix then everything works fine. Why does not fusion auth work locally with custom domains?

Cookies on my local app fusionauth.localhost:4000 are also saved after I logged in: https://freeimage.host/i/3FVbSJs Wacky Flip

And when I click login button again (or invoke startLogin function from useFusionAuth hook) I am redirected right away to the app since I am logged in. But isLoggedIn is false and useFusionAuth hook does not recognize that user is logged in.

(I have mapped fusionauth.localhost to localhost in my hosts file locally)

#docker #react-sdk

Set SameSite=None; Secure explicitly on the FusionAuth Cookie: this tells the browser to send the cookie with all requests, even cross-site requests. SameSite=None requires the Secure attribute, meaning the cookie will only be sent over HTTPS. Since you are using http://, this won't work directly without HTTPS set up locally.