feat(ts): strongly type sign-in and error page errors (#3740)

* feat: added types for sign in errors * feat: adding type to error prop * chore: added documentation links to types
nextauthjs · Feb 2, 2022 · 53baf6d · 53baf6d
1 parent 255c822
commit 53baf6d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 20 deletions.
diff --git a/src/core/pages/error.tsx b/src/core/pages/error.tsx
@@ -1,10 +1,20 @@
 import { Theme } from "../.."
 import { InternalUrl } from "../../lib/parse-url"
 
+/**
+ * The following errors are passed as error query parameters to the default or overridden error page.
+ *
+ * [Documentation](https://next-auth.js.org/configuration/pages#error-page) */
+export type ErrorType =
+  | "default"
+  | "configuration"
+  | "accessdenied"
+  | "verification"
+
 export interface ErrorProps {
   url?: InternalUrl
   theme?: Theme
-  error?: string
+  error?: ErrorType
 }
 
 interface ErrorView {
@@ -14,12 +24,6 @@ interface ErrorView {
   signin?: JSX.Element
 }
 
-export type ErrorType =
-  | "default"
-  | "configuration"
-  | "accessdenied"
-  | "verification"
-
 /** Renders an error page. */
 export default function ErrorPage(props: ErrorProps) {
   const { url, error = "default", theme } = props
@@ -87,15 +91,17 @@ export default function ErrorPage(props: ErrorProps) {
     status,
     html: (
       <div className="error">
-      { theme?.brandColor && <style
-        dangerouslySetInnerHTML={{
-          __html: `
+        {theme?.brandColor && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
         :root {
           --brand-color: ${theme?.brandColor}
         }
       `,
-        }}
-      /> }
+            }}
+          />
+        )}
         {theme?.logo && <img src={theme.logo} alt="Logo" className="logo" />}
         <div className="card">
           <h1>{heading}</h1>

diff --git a/src/core/pages/signin.tsx b/src/core/pages/signin.tsx
@@ -1,12 +1,29 @@
 import { Theme } from "../.."
 import { InternalProvider } from "../../lib/types"
 
+/**
+ * The following errors are passed as error query parameters to the default or overridden sign-in page.
+ *
+ * [Documentation](https://next-auth.js.org/configuration/pages#sign-in-page) */
+export type SignInErrorTypes =
+  | "Signin"
+  | "OAuthSignin"
+  | "OAuthCallback"
+  | "OAuthCreateAccount"
+  | "EmailCreateAccount"
+  | "Callback"
+  | "OAuthAccountNotLinked"
+  | "EmailSignin"
+  | "CredentialsSignin"
+  | "SessionRequired"
+  | "default"
+
 export interface SignInServerPageParams {
   csrfToken: string
   providers: InternalProvider[]
   callbackUrl: string
   email: string
-  error: string
+  error: SignInErrorTypes
   theme: Theme
 }
 
@@ -39,7 +56,7 @@ export default function SigninPage(props: SignInServerPageParams) {
     )
   }
 
-  const errors: Record<string, string> = {
+  const errors: Record<SignInErrorTypes, string> = {
     Signin: "Try signing in with a different account.",
     OAuthSignin: "Try signing in with a different account.",
     OAuthCallback: "Try signing in with a different account.",
@@ -59,16 +76,17 @@ export default function SigninPage(props: SignInServerPageParams) {
 
   return (
     <div className="signin">
-
-      { theme.brandColor && <style
-        dangerouslySetInnerHTML={{
-          __html: `
+      {theme.brandColor && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
         :root {
           --brand-color: ${theme.brandColor}
         }
       `,
-        }}
-      /> }
+          }}
+        />
+      )}
       {theme.logo && <img src={theme.logo} alt="Logo" className="logo" />}
       <div className="card">
         {error && (