How to login user with username/password

[qweluke]

So I’m using two libs in my app:

• @auth0/auth0-react
• auth0-js

My React.js app is wrapped around the Auth0Provider component, like so:

import React from 'react';
import { useHistory } from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
  const history = useHistory();

  const onRedirectCallback = (appState) =>
    history.push(appState?.returnTo || window.location.pathname);

  return (
    <Auth0Provider
      domain={process.env.NX_AUTH0_DOMAIN}
      clientId={process.env.NX_AUTH0_CLIENT_ID}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={process.env.NX_AUTH0_AUDIENCE}
      scope="openid profile email"
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

I have a custom form to handle login without navigating outside the page which is working ok.

import auth0 from 'auth0-js';
...
  const handleLogin = (data) => {
    const webAuth = new auth0.WebAuth({
      domain: process.env.NX_AUTH0_DOMAIN,
      clientID: process.env.NX_AUTH0_CLIENT_ID,
      audience: process.env.NX_AUTH0_AUDIENCE,
      redirectUri: window.location.origin,
      scope: 'openid profile email',
      responseType: 'code',
    });

    return webAuth.login(
      {
        username: data.email,
        password: data.password,
        popup: true,
      },
      () => history.push(successfulLoginRedirectUrl),
    );
  };

The issue I am struggling with is that auth0-js does not set a cache/session in @auth0/auth0-react/Auth0ProviderWithHistory…

I think that is might not be possible to authenticate user on auth0-react with auth0.js so maybe it is somehow possible with spa-js?
How to properly login a user by passing email/password with @auth0/auth0-react or @auth0/auth0-spa-js or auth0-js?

[dan.woda]

Hi @qweluke,

Welcome to the Auth0 Community!

You should only use auth0-js for this. Other two SDKs you listed do not support the underlying grant type for embedded login.

The reference for how to return a token directly for a username/password is here.

Let me know if you have other questions!

P.S. You are going to see a lot of warnings about how we don’t recommend this approach (direct exchange of username/password for tokens). If you don’t have a strict requirement, I would suggest using a redirect based login approach.

[qweluke]

Thanks for the reply. Basically what I am trying to achieve is to use single token/authentication on multiple apps in the same tenant without navigating away from my site- so you should log in only once and then you could navigate between different apps in the same domain eg.

mydomain.io

mydomain.io

…

And this is working fine except for this weird behavior in @auth0/auth0-react. So what you are saying is that for the whole react app I should be using auth0-js, get rid of @auth0/auth0-react along with Auth0Provider ?

[dan.woda]

That is correct. auth0-react is built on auth0-spa-js, and is not intended for embedded login.