Breaking News: Grepper is joining You.com. Read the official announcement!

How to handle login failed error in NextAuth

Strange Snake answered on July 9, 2023 Popularity 6/10 Helpfulness 3/10

answer How to handle login failed error in NextAuth

related How to handle login failed error in NextAuth

How to handle login failed error in NextAuth

Comment

// pages/login.js
import { useState } from 'react';
import { signIn } from 'next-auth/react';
import { useRouter } from 'next/router';

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

export default function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { error } = useRouter().query;

  const onSubmit = async () => {
    signIn('credentials', {
      username: username,
      password: password,
      redirect: false,
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <Container>
      <Row>
        <Col lg={6} className="offset-lg-3">
          {/* Error message */}
          <Row>
            <Col>{error && <SignInError error={error} />}</Col>
          </Row>
          <Form>
            <Row>
              <Col>
                <Form.Group controlId="loginUsername">
                  <Form.Label>Username</Form.Label>
                  <Form.Control
                    type="text"
                    onChange={(e) => setUsername(e.target.value)}
                    value={username}
                  />
                </Form.Group>
              </Col>
            </Row>
            <Row>
              <Col>
                <Form.Group controlId="loginPassword">
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    type="text"
                    onChange={(e) => setPassword(e.target.value)}
                    value={password}
                  />
                </Form.Group>
              </Col>
            </Row>
            <Row className="pt-3">
              <Col lg={4}>
                <Button onClick={onSubmit}>Login</Button>
              </Col>
            </Row>
            <Row>
              <Col></Col>
            </Row>
          </Form>
        </Col>
      </Row>
    </Container>
  );
}

const errors = {
  Signin: 'Try signing with a different account.',
  OAuthSignin: 'Try signing with a different account.',
  OAuthCallback: 'Try signing with a different account.',
  OAuthCreateAccount: 'Try signing with a different account.',
  EmailCreateAccount: 'Try signing with a different account.',
  Callback: 'Try signing with a different account.',
  OAuthAccountNotLinked:
    'To confirm your identity, sign in with the same account you used originally.',
  EmailSignin: 'Check your email address.',
  CredentialsSignin:
    'Sign in failed. Check the details you provided are correct.',
  default: 'Unable to sign in.',
};

const SignInError = ({ error }) => {
  const errorMessage = error && (errors[error] ?? errors.default);
  return <div>{errorMessage}</div>;
};

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: handle javascript next-auth

Link to this answer
Share Copy Link

Contributed on Jul 09 2023

Strange Snake

0 Answers Avg Quality 2/10

Closely Related Answers

How to handle login failed error in NextAuth

Comment

pages: {
    signIn: '/login',
    error: '/login'
  },

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript next-auth handle

Link to this answer
Share Copy Link

Contributed on Jul 09 2023

Strange Snake

0 Answers Avg Quality 2/10

How to handle login failed error in NextAuth

Contents

More Related Answers

How to handle login failed error in NextAuth

Closely Related Answers

How to handle login failed error in NextAuth

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.