I have a React SPA that’s using two Auth0 Applications:
Login (App) Client
The default client used in the React app (SPA), where users are authenticated in the context of an Organization. It uses the Business Users login experience and Prompt for credentials. It uses the auth0-react-sdk.
Signup (Onboarding) Client
Used for first-time signup, where users aren’t in an Organization yet, and are authenticated outside of the context of an Auth0 Organization. It’s a also configured as a Single Page Application, but uses Individual login experience. It uses auth0-spa-js SDK to create the onboarding client.
My current flow is this:
User enters email and clicks “Get Started”
onboardingClient.loginWithRedirect is called and redirects to Universal Login
After signing up, user is redirected to /onboarding, enters their organization name and then calls a server-endpoint, and using an M2M application it:
Creates a new Auth0 Organization
Adds user as a member of the new organization
Returns org_id
appClient.loginWithRedirect is called and passes org_id as the organization parameter in authorizationParams.
User accepts organization access
User is redirected to the main application under the context of an organization
The issue I’m facing is when I log out and try logging back in. After entering my email and password, I get “Wrong email or password”. I verified the organization is using the same database connection as my two applications, and both applications have the database connection enabled, and the user is a member of the organization. Authentication Profile is also set to “Identifier First”.
@pburr welcome to the Auth0 Community. One of our certified Auth0 Community experts will chime in to assist you from here. Glad you’re here. Hang tight!
The “Wrong email or password” error is most likely occurring because the organization parameter is missing from the authorization request on subsequent login attempts. When using Auth0 Organizations, this parameter is required to provide the correct context for authentication.
To resolve this, you must ensure that every login attempt made through your “Login (App) Client” includes the organization ID.
The key challenge, of course, is how your application can know the user’s org_idbefore they are authenticated. Here are the two most common and robust patterns to solve this:
Before redirecting to the Auth0 Universal Login page, you can build a screen in your React app that asks the user to identify their organization.
The user enters their organization’s name into a form in your app.
Your app makes a call to your backend with this identifier.
Your backend uses the Auth0 Management API to find the corresponding organization_id.
Your backend returns the organization_id to your React app.
Your app now calls loginWithRedirect and passes the retrieved ID.
Here’s how you would trigger the login in your React component once you have the orgId:
import { useAuth0 } from "@auth0/auth0-react";
// ... inside your component
const { loginWithRedirect } = useAuth0();
const handleLogin = async (organizationName) => {
// You would fetch the orgId from your backend based on the name
const org = await managementApi.organizations.getByName(organizationName);
const orgId = org.id
if (orgId) {
loginWithRedirect({
authorizationParams: {
organization: orgId,
},
});
} else {
// Handle case where organization is not found
}
};
2. Organization-Specific Subdomains
A more seamless user experience can be achieved using subdomains (e.g., acme.com).
Your application logic reads the subdomain from the browser’s URL (window.location.hostname).
It uses this subdomain as the identifier to fetch the corresponding organization_id from your backend, similar to the method above.
It then calls loginWithRedirect with the correct organization parameter.
If you have any other questions, feel free to reach out!
I was under the impression that with Universal Login, I could enter my credentials and be automatically logged into my organization if I only belong to one, or be prompted to choose an organization if I belong to multiple. Am I misunderstanding how this works?
For context, I’m trying to replicate the onboarding and login flow from auth0-b2b-saas-starter, with the main difference being that I’m using the React SDK instead of the Next.js SDK.
If inside your application settings, the Login Experience is set to Business Users or Both, and the Login Flow is set to No Prompt, you will leave the responsibility of providing the org_id to your app.
If it’s set to Prompt for Credentials, after successfully logging in, you will be prompted to choose your organization, as you expect.