Multiple db connections for a single app

Get Help
,
9

Hi,

I think I have got it working as expected now. Thanks for the tip. I’ll explain briefly what I did in case someone else finds it useful.

  • 2 apps were created. One called Kid-App and one called Adult-App.
  • 2 db connections were created. Again, one for the kids and one for the adults.
  • Both apps were configured to only use their own database.
  • Both db connections were configured to only allow one app to use them (kid->kid, adult->adult).
  • The options “Disable Sign Ups” and “Requires Username” were set for the kids db connection.

And voilá, I had to two different auth0 sign ins in my React SPA, one per username and without sign up for the kids and one normal adult sign in.

The <AuthProvider /> was then moved from index.tsx to the header.tsx where the 2 login buttons are (one for kid and one for adult):

Header.tsx

import React from "react";
import { Auth0Provider } from "@auth0/auth0-react";
import "./Header.css";
import LoginButton from "./LoginButton";
import LogoutButton from "./LogoutButton";

function Header() {
  return (
    <header>
      <nav>
        {/* Adult Login */}
        <Auth0Provider
          domain="example-app-dev.auth0.com"
          clientId="1234512345"
          redirectUri="http://localhost:3000/adults/"
        >
          <LoginButton label="Adult Sign In" />
          <LogoutButton />
        </Auth0Provider>
        {/* Kid Login */}
        <Auth0Provider
          domain="example-app-dev.auth0.com"
          clientId="9876598765"
          redirectUri="http://localhost:3000/kids/"
        >
          <LoginButton label="Kid Sign In" />
          <LogoutButton />
        </Auth0Provider>
      </nav>
    </header>
  );
}

export default Header;

LoginButton.tsx

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const LoginButton = (props: { label: String }) => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick={() => loginWithRedirect()}>{props.label}</button>;
};

export default LoginButton;
  • Both buttons provide their own redirectUri, which has to be configured for each app in the “Allowed Callback URLs” field.
  • Notice how both <AuthProviders/> have a different clientId. One for the kid-app and one for the adult-app.

The setup is actually a lot simpler than I anticipated. It helps of course to have a better understanding of how auth0 works.

Also, I had not thought of putting both apps in separate react-projects before, which made it more complicated and makes little sense anyway.

I now have 3 apps:

  1. Homepage with login and redirect to kid or adult app.
  2. Kid app.
  3. Adult app.

Thanks again!

Best regards,
Michael

1 Like