Refactored the with-supertokens example to use typescript (#39987)

<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we
request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

Convert example to use typescript.

Co-authored-by: Titus Moore <tmoore@edgewebware.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>

examples/with-supertokens/config/backendConfig.js → examples/with-supertokens/config/backendConfig.ts

@@ -1,8 +1,9 @@
 import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
 import SessionNode from 'supertokens-node/recipe/session'
 import { appInfo } from './appInfo'
+import { AuthConfig } from '../interfaces'
 
-export let backendConfig = () => {
+export let backendConfig = (): AuthConfig => {
   return {
     framework: 'express',
     supertokens: {

examples/with-supertokens/interfaces.d.ts

@@ -0,0 +1,16 @@
+import { TypeFramework } from 'supertokens-node/lib/build/framework/types'
+
+export interface AuthConfig {
+  framework: TypeFramework
+  supertokens: {
+    connectionURI: string
+  }
+  appInfo: {
+    appName: string
+    websiteDomain: string
+    apiDomain: string
+    apiBasePath: string
+  }
+  recipeList: any
+  isInServerlessEnv: boolean
+}

examples/with-supertokens/package.json

@@ -7,9 +7,14 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "supertokens-auth-react": "^0.24.0",
-    "supertokens-node": "^11.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "supertokens-auth-react": "^0.24.7",
+    "supertokens-node": "^11.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.17",
+    "@types/node": "18.7.13",
+    "typescript": "^4.8.2"
   }
 }

examples/with-supertokens/pages/_app.js → examples/with-supertokens/pages/_app.tsx

@@ -10,7 +10,7 @@ if (typeof window !== 'undefined') {
   SuperTokensReact.init(SuperTokensConfig.frontendConfig())
 }
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }): JSX.Element {
   useEffect(() => {
     async function doRefresh() {
       if (pageProps.fromSupertokens === 'needs-refresh') {

examples/with-supertokens/pages/auth/[[...path]].js → examples/with-supertokens/pages/auth/[[...path]].tsx

@@ -10,7 +10,7 @@ const SuperTokensComponentNoSSR = dynamic(
   { ssr: false }
 )
 
-export default function Auth() {
+export default function Auth(): JSX.Element {
   useEffect(() => {
     if (SuperTokens.canHandleRoute() === false) {
       redirectToAuth()

examples/with-supertokens/pages/index.js → examples/with-supertokens/pages/index.tsx

@@ -30,14 +30,6 @@ export async function getServerSideProps(context) {
   }
 }
 
-export default function Home(props) {
-  return (
-    <ThirdPartyEmailPasswordAuth>
-      <ProtectedPage userId={props.userId} />
-    </ThirdPartyEmailPasswordAuth>
-  )
-}
-
 function ProtectedPage({ userId }) {
   const session = useSessionContext()
 
@@ -178,3 +170,11 @@ function ProtectedPage({ userId }) {
     </div>
   )
 }
+
+export default function Home(props) {
+  return (
+    <ThirdPartyEmailPasswordAuth>
+      <ProtectedPage userId={props.userId} />
+    </ThirdPartyEmailPasswordAuth>
+  )
+}

examples/with-supertokens/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "interfaces.d.ts"],
+  "exclude": ["node_modules"]
+}