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.
