# How to login user with username/password

**URL:** <https://community.auth0.com/t/how-to-login-user-with-username-password/76743>\
**Category:** Get Help\
**Tags:** auth0-spa-js\
**Created:** [January 20, 2022, 5:17pm UTC](https://community.auth0.com/t/how-to-login-user-with-username-password/76743 "2022-01-20T17:17:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![qweluke](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/qweluke/32/34549_2.png) [@qweluke](https://community.auth0.com/u/qweluke)\
**Post date:** [January 20, 2022, 5:17pm UTC](https://community.auth0.com/t/how-to-login-user-with-username-password/76743/1 "2022-01-20T17:17:20Z")

</div>

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:

```auto
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.

```auto
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`?

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [January 20, 2022, 9:22pm UTC](https://community.auth0.com/t/how-to-login-user-with-username-password/76743/3 "2022-01-20T21:22:24Z")

</div>

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](https://auth0.com/docs/libraries/auth0js#webauth-login-).

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.

---

<div class="post-metadata">

**Author:** ![qweluke](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/qweluke/32/34549_2.png) [@qweluke](https://community.auth0.com/u/qweluke)\
**Post date:** [January 20, 2022, 9:33pm UTC](https://community.auth0.com/t/how-to-login-user-with-username-password/76743/4 "2022-01-20T21:33:12Z")

</div>

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](http://dev.app1.mydomain.io)**
>
> This domain may be for sale!

> **[mydomain.io](http://dev.app2.mydomain.io)**
>
> This domain may be for sale!

…

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 `?

---

<div class="post-metadata">

**Author:** ![dan.woda](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/dan.woda/32/18340_2.png) [@dan.woda](https://community.auth0.com/u/dan.woda)\
**Post date:** [January 20, 2022, 9:38pm UTC](https://community.auth0.com/t/how-to-login-user-with-username-password/76743/5 "2022-01-20T21:38:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [February 4, 2022, 9:39pm UTC](https://community.auth0.com/t/how-to-login-user-with-username-password/76743/6 "2022-02-04T21:39:45Z")

</div>

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.