Why I am getting 401 for api/v1/authn endpoint?

I have implemented a custom login component for login but when the user clicks on the login button I am seeing a 401 error in the network tab (chrome browser).

Code:

import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { useOktaAuth } from "@okta/okta-react";

export const Login = () => {
  const history = useHistory();
  const { oktaAuth } = useOktaAuth();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [sessionToken, setSessionToken] = useState(null);

  const onSubmit = (e) => {
    e.preventDefault();

    const data = {
      username: email,
      password: password,
    };

    oktaAuth
      .signInWithCredentials(data)
      .then((res) => {
        const sessionToken = res.sessionToken;
        if (!sessionToken) {
          throw new Error("authentication process failed");
        }
        console.log("sessionToken", sessionToken);
        setSessionToken(sessionToken);
        oktaAuth.signInWithRedirect({
          originalUri: "/chat",
          sessionToken: sessionToken,
        });
      })
      .catch((err) => console.log("handle error here", err));
  };

  if (sessionToken) return <div />;

  return (
    <MainContainer>
      <LoginContainer>
        <TextField
          id="filled-password-input"
          label="Email"
          type="email"
          autoComplete="current-email"
          variant="standard"
          style={{ width: 400, margin: 15 }}
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <TextField
          id="filled-password-input"
          label="Password"
          type="password"
          autoComplete="current-password"
          variant="standard"
          style={{ width: 400, margin: 15 }}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <div style={{ flexDirection: "row", justifyContent: "center" }}>
          <Button variant="contained" style={{ margin: 15 }} onClick={onSubmit}>
            Login
          </Button>
          <Button
            variant="contained"
            style={{ margin: 15 }}
            onClick={() => history.push("/register")}
          >
            Register
          </Button>
        </div>
      </LoginContainer>
    </MainContainer>
  );
};

I have already added http://localhost:3000 in trusted origins do I need to configure anything else or am I missing anything?
Note: I have already created users on okta using okta nodejs SDK. I am using create user endpoint @okta/okta-sdk-nodejs - npm
I am trying to log in with the same user credentials which I created using okta nodejs SDK.

what is the endpoint and payload sent to Okta, for which you see 401?

@phi1ipp API endpoint: https://{oktaOrgURL}/api/v1/authn (oktaOrgURL = dev-XXXXXX.okta.com)
Payload: username: user1@gmail.com password: 12345

@phi1ipp Endpoint is https://{oktaOrgURL}/api/v1/authn and payload I am passing username and password. In console I am seeing 401 error and in network tab is showing 200 OK but instead of POST it is OPTIONS

That’s weird, my first reaction would be to check CORS settings in Trusted Origin section, usually that can cause pre-flight OPTIONS request to fail, or check also, that your OktaOrgUrl doesn’t have ...-admin in its name

@phi1ipp Please review attached screenshot let me know if I am missing anything? Thanks



No, it all looks good, weird…

Hi @mraible can someone from okta team help me to solve this issue? Thanks in advance.

I’d recommend looking at this tutorial: A Quick Guide to React Login Options | Okta Developer

If you can snag the x-okta-request-id response header from the failing authorize call I’d be happy to look into it on our end to see if I can glean any information that way.

@tyty Check these
1)x-okta-request-id: YVHvi2eg6F8KSwoqNt9JuwAADEs
2)x-okta-request-id: YVHvXPI0Lo1M4VjQS-GpxQAABqI

Interesting - I’m seeing that these are tied to 200 at OPTIONS but no related 401 - It’s almost as if it’s not making it to Okta.

@tyty Ok let me know if you need some more info or any code which I can share. I am struggling with this issue from couple of days. Please let me know if anything I can try out from my side.

@tyty @mraible Any update? Any idea what could be wrong? Am I missing something?

@phi1ipp @mraible @tyty I just cloned this repo GitHub - oktadev/okta-react-login-example at custom-login-form and switched to custom-login-form branch just added client id and okta org URL i.e issuer but still facing same problem. Am I missing something? Please help as I couldn’t find any solution from last couple of days. Thanks in advance

Should these creds actually work? If not can you provide test creds I can use to try and repro?

FWIW using bad creds I do get a 401 response with request ID from Okta.

@aditodkar looking at Okta request-id YVHvi2eg6F8KSwoqNt9JuwAADEs and xYVHvXPI0Lo1M4VjQS-GpxQAABqI it shows the reason of the 401 is because the account is locked out.

1 Like

@erik Sorry did not get it. How is account locked? I have registered user using okta-nodejs sdk and then trying to login user