React SDK - Architecture

david.toon.fsd

Just reviewing how to integrate FusionAuth within an existing codebase and architecture. It appears from the following:
https://github.com/FusionAuth/fusionauth-example-react

That one would need a separate "identity" server to manage communication between any React front ends and FusionAuth is this correct?

Am I correct is saying that there is no way to directly integrate the React SDK directly to the FusionAuth server?

tiny.lamp6590

@david-toon-fsd

I am testing out React & FusionAuth as well and so far for the login/registration it looks like you need to go through a communication server like Express for the token and auth. But with the SDK once logged in you can use a provider context and hooks to check authentication state. Check out their fusionauth-example-react-sdk

the Provider from the src/index.tsx

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <FusionAuthProviderWithRedirectHandling>
                <App />
            </FusionAuthProviderWithRedirectHandling>
      </BrowserRouter>
  </React.StrictMode>
);

and a hook for getting Auth state from the AccountPage.tsx

const { user, isAuthenticated, isLoading } = useFusionAuth();

But I think I have some of the same general questions as you, such as I would like to use my own integrated React-Tailwind styled login form to send credentials rather than having to use and theme theirs to try to match my app. And do I have to use their provide Login Button to link to their login form or is that just for convenience?

<FusionAuthLoginButton className={styles.button} />

david.toon.fsd

@tiny-lamp6590 yes, I believe you do need your own back end for token exchange.

I've now written my own, there are some gotcha's when using the React SDK with your custom built auth server. You have to ensure that you drop the following cookie:
app.at_exp - otherwise you isAuthenticated will show as false.

tiny.lamp6590

@david-toon-fsd I think that is where I am headed next, thanks for the heads up on cookies. I finally got the their fusionauth-example-react-sdk working with self hosted non-docker and cookies were part of the problem.

My main goal is to figure out how to use my own login forms, etc and not have to deal with creating and matching my styling with their hosted forms even though they recommend it. @dan has some advice from this 2020 post if your doing the same.

It would be great if they had an unstyled set of components so we could drop in like <FustionAuthLogin/> and send it the specified Props and integrate/style as needed. May try to create a small headless UI library down the road to do that if I ever get this all figured out.

dan

@tiny-lamp6590 Hey folks

As of FusionAuth 1.45, we have something that mimics the express server functionality built into FusionAuth. We call it the 'hosted backend'.

You can see it used here: https://github.com/FusionAuth/fusionauth-example-react-guide

It's documented here: https://fusionauth.io/docs/v1/tech/apis/hosted-backend

But using an express app will give you more flexibility (to choose a different cookie name, or do additional processing during the token exchange).

We are working on a tailwind integration doc so that you can use the same tailwind css between your react app and FusionAuth login pages. Here's the PR for that: https://github.com/FusionAuth/fusionauth-site/pull/2117 (still under review).

Thanks for using FusionAuth!