From a969e0a8e9978764c08803dfa94ea9fb98c5ea64 Mon Sep 17 00:00:00 2001
From: Robin <hacktivistic@gmail.com>
Date: Thu, 2 Feb 2023 11:35:29 +0530
Subject: [PATCH 1/3] Update examples to TS

---
 docs/docs/configuration/pages.md | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/docs/docs/configuration/pages.md b/docs/docs/configuration/pages.md
index 8ba1949029..afe98783b1 100644
--- a/docs/docs/configuration/pages.md
+++ b/docs/docs/configuration/pages.md
@@ -77,13 +77,14 @@ In addition, you can define a `theme.brandColor` to define a custom accent color
 
 In order to get the available authentication providers and the URLs to use for them, you can make a request to the API endpoint `/api/auth/providers`:
 
-```jsx title="pages/auth/signin.js"
+```tsx title="pages/auth/signin.ts"
+import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { getProviders, signIn } from "next-auth/react"
 
-export default function SignIn({ providers }) {
+export default function SignIn({ providers }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <>
-      {Object.values(providers).map((provider) => (
+      {providers && Object.values(providers).map((provider) => (
         <div key={provider.name}>
           <button onClick={() => signIn(provider.id)}>
             Sign in with {provider.name}
@@ -94,7 +95,7 @@ export default function SignIn({ providers }) {
   )
 }
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   const providers = await getProviders()
   return {
     props: { providers },
@@ -108,10 +109,11 @@ There is another, more fully styled example signin page available [here](https:/
 
 If you create a custom sign in form for email sign in, you will need to submit both fields for the **email** address and **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/signin/email**.
 
-```jsx title="pages/auth/email-signin.js"
+```tsx title="pages/auth/email-signin.ts"
+import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { getCsrfToken } from "next-auth/react"
 
-export default function SignIn({ csrfToken }) {
+export default function SignIn({ csrfToken }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <form method="post" action="/api/auth/signin/email">
       <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
@@ -124,7 +126,7 @@ export default function SignIn({ csrfToken }) {
   )
 }
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   const csrfToken = await getCsrfToken(context)
   return {
     props: { csrfToken },
@@ -134,7 +136,7 @@ export async function getServerSideProps(context) {
 
 You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
 
-```js
+```ts
 signIn("email", { email: "jsmith@example.com" })
 ```
 
@@ -142,10 +144,11 @@ signIn("email", { email: "jsmith@example.com" })
 
 If you create a sign in form for credentials based authentication, you will need to pass a **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/callback/credentials**.
 
-```jsx title="pages/auth/credentials-signin.js"
+```tsx title="pages/auth/credentials-signin.ts"
+import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { getCsrfToken } from "next-auth/react"
 
-export default function SignIn({ csrfToken }) {
+export default function SignIn({ csrfToken }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <form method="post" action="/api/auth/callback/credentials">
       <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
@@ -162,7 +165,7 @@ export default function SignIn({ csrfToken }) {
   )
 }
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
   return {
     props: {
       csrfToken: await getCsrfToken(context),
@@ -173,7 +176,7 @@ export async function getServerSideProps(context) {
 
 You can also use the `signIn()` function which will handle obtaining the CSRF token for you:
 
-```js
+```ts
 signIn("credentials", { username: "jsmith", password: "1234" })
 ```
 

From 04e0f513407f5dd44a73b51a141a0dc42fa09818 Mon Sep 17 00:00:00 2001
From: Robin <hacktivistic@gmail.com>
Date: Thu, 2 Feb 2023 11:39:24 +0530
Subject: [PATCH 2/3] docs: update files names to corresponding TSX

having jsx syntax, file needs to be jsx/tsx.
---
 docs/docs/configuration/pages.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/docs/configuration/pages.md b/docs/docs/configuration/pages.md
index afe98783b1..b9fefa19d9 100644
--- a/docs/docs/configuration/pages.md
+++ b/docs/docs/configuration/pages.md
@@ -77,7 +77,7 @@ In addition, you can define a `theme.brandColor` to define a custom accent color
 
 In order to get the available authentication providers and the URLs to use for them, you can make a request to the API endpoint `/api/auth/providers`:
 
-```tsx title="pages/auth/signin.ts"
+```tsx title="pages/auth/signin.tsx"
 import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { getProviders, signIn } from "next-auth/react"
 
@@ -109,7 +109,7 @@ There is another, more fully styled example signin page available [here](https:/
 
 If you create a custom sign in form for email sign in, you will need to submit both fields for the **email** address and **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/signin/email**.
 
-```tsx title="pages/auth/email-signin.ts"
+```tsx title="pages/auth/email-signin.tsx"
 import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { getCsrfToken } from "next-auth/react"
 
@@ -144,7 +144,7 @@ signIn("email", { email: "jsmith@example.com" })
 
 If you create a sign in form for credentials based authentication, you will need to pass a **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/callback/credentials**.
 
-```tsx title="pages/auth/credentials-signin.ts"
+```tsx title="pages/auth/credentials-signin.tsx"
 import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { getCsrfToken } from "next-auth/react"
 

From cf68e81241a5453d99705db7ae5ac378af2bbdf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Fri, 3 Feb 2023 13:57:34 +0000
Subject: [PATCH 3/3] Apply suggestions from code review

---
 docs/docs/configuration/pages.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docs/configuration/pages.md b/docs/docs/configuration/pages.md
index b9fefa19d9..595d8efcfd 100644
--- a/docs/docs/configuration/pages.md
+++ b/docs/docs/configuration/pages.md
@@ -84,7 +84,7 @@ import { getProviders, signIn } from "next-auth/react"
 export default function SignIn({ providers }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <>
-      {providers && Object.values(providers).map((provider) => (
+      {Object.values(providers).map((provider) => (
         <div key={provider.name}>
           <button onClick={() => signIn(provider.id)}>
             Sign in with {provider.name}
@@ -98,7 +98,7 @@ export default function SignIn({ providers }: InferGetServerSidePropsType<typeof
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const providers = await getProviders()
   return {
-    props: { providers },
+    props: { providers: Object.values(providers) ?? [] },
   }
 }
 ```