Display error messages

pages/api/auth/[...nextauth].js

@@ -4,6 +4,12 @@ import registerUser from '@/functions/wordpress/auth/registerUser'
 import NextAuth from 'next-auth'
 import Providers from 'next-auth/providers'
 
+const LOGIN_ERRORS = {
+  INVALID_USERNAME: 'invalid_username',
+  INCORRECT_PASSWORD: 'incorrect_password',
+  INVALID_EMAIL: 'invalid_email'
+}
+
 const userFields = [
   'accessToken',
   'userId',
@@ -78,8 +84,23 @@ const providers = [
       const {username, password} = credentials
       const response = await loginUser(username, password)
 
+      let errorMessage
       if (response.error) {
-        throw `/login?error=${response.errorMessage}`
+        switch (response.errorMessage) {
+          case LOGIN_ERRORS.INVALID_USERNAME:
+            errorMessage = 'Username does not exists in our records.'
+            break
+          case LOGIN_ERRORS.INCORRECT_PASSWORD:
+            errorMessage = 'Incorrect password.'
+            break
+          case LOGIN_ERRORS.INVALID_EMAIL:
+            errorMessage = 'Email address does not exists in our records.'
+            break
+          default:
+            errorMessage = 'Error occured during login. Please try again.'
+            break
+        }
+        throw new Error(errorMessage)
       }
 
       return createUserObj(response)
@@ -106,7 +127,7 @@ const providers = [
       })
 
       if (response.error) {
-        throw `/register?error=${response.errorMessage}`
+        throw new Error(response.errorMessage)
       }
 
       return createUserObj(response)

pages/login.js

@@ -7,7 +7,7 @@ import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeS
 import {signIn, useSession} from 'next-auth/client'
 import Link from 'next/link'
 import {useRouter} from 'next/router'
-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 
 /**
  * Render the Login component.
@@ -16,6 +16,7 @@ import React, {useEffect} from 'react'
  * @return {Element} The Login component.
  */
 export default function Login() {
+  const [errorMessage, setErrorMessage] = useState('')
   const [session] = useSession()
   const router = useRouter()
 
@@ -26,10 +27,30 @@ export default function Login() {
     }
   })
 
+  /**
+   * Submit login form.
+   *
+   * @author WebDevStudios
+   * @param {object} values Field values to submit.
+   */
+  async function submitForm(values) {
+    const {username, password} = values
+    const response = await signIn('wpLogin', {
+      username,
+      password,
+      redirect: false
+    })
+
+    if (response.error) {
+      setErrorMessage(response.error)
+    }
+  }
+
   return (
     <Layout>
       <Container>
         <RichText tag="h1">Login</RichText>
+        {!!errorMessage && <div>{errorMessage}</div>}
         <Form
           className="login-form"
           id="login-form"
@@ -38,16 +59,7 @@ export default function Login() {
             username: '',
             password: ''
           }}
-          onSubmit={async (values, {setSubmitting}) => {
-            const {username, password} = values
-            signIn('wpLogin', {
-              username,
-              password,
-              callbackUrl: '/profile'
-            })
-
-            setSubmitting(false)
-          }}
+          onSubmit={submitForm}
         >
           <Text id="username" label="Username" isRequired type="text" />
           <Text id="password" label="Password" isRequired type="password" />

pages/register.js

@@ -6,7 +6,7 @@ import Form from '@/components/molecules/Form'
 import getPostTypeStaticProps from '@/functions/wordpress/postTypes/getPostTypeStaticProps'
 import {signIn, useSession} from 'next-auth/client'
 import {useRouter} from 'next/router'
-import React, {useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 
 /**
  * Render the Register component.
@@ -15,6 +15,7 @@ import React, {useEffect} from 'react'
  * @return {Element} The Register component.
  */
 export default function Register() {
+  const [errorMessage, setErrorMessage] = useState('')
   const [session] = useSession()
   const router = useRouter()
 
@@ -25,10 +26,33 @@ export default function Register() {
     }
   })
 
+  /**
+   * Submit registration form.
+   *
+   * @author WebDevStudios
+   * @param {object} values Field values to submit.
+   */
+  async function submitForm(values) {
+    const {firstName, lastName, email, password, username} = values
+    const response = await signIn('wpRegister', {
+      firstName,
+      lastName,
+      email,
+      password,
+      username,
+      redirect: false
+    })
+
+    if (response.error) {
+      setErrorMessage(response.error)
+    }
+  }
+
   return (
     <Layout>
       <Container>
         <RichText tag="h1">Register</RichText>
+        {!!errorMessage && <div>{errorMessage}</div>}
         <Form
           className="registration-form"
           id="registration-form"
@@ -40,19 +64,7 @@ export default function Register() {
             password: '',
             username: ''
           }}
-          onSubmit={async (values, {setSubmitting}) => {
-            const {firstName, lastName, email, password, username} = values
-            signIn('wpRegister', {
-              firstName,
-              lastName,
-              email,
-              password,
-              username,
-              callbackUrl: '/profile'
-            })
-
-            setSubmitting(false)
-          }}
+          onSubmit={submitForm}
         >
           <Text id="firstName" label="First Name" isRequired type="text" />
           <Text id="lastName" label="Last Name" isRequired type="text" />