fix: update clerk oauth provider types

saas-js · Dec 9, 2023 · 02d5606 · 02d5606
1 parent ff13af6
commit 02d5606
Show file tree

Hide file tree

Showing 14 changed files with 1,096 additions and 947 deletions.
diff --git a/.changeset/long-rats-buy.md b/.changeset/long-rats-buy.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/clerk': patch
+---
+
+Updated clerk provider types
diff --git a/examples/clerk-auth/README.md b/examples/clerk-auth/README.md
@@ -1,6 +1,6 @@
-# TypeScript Next.js Saas UI example
+# TypeScript Next.js Saas UI Clerk example
 
-This is a really simple project that shows the usage of Next.js with TypeScript.
+This is a basic example of how to use [Clerk](https://clerk.dev) to add authentication to a Next.js app using Saas UI
 
 ## Deploy your own
 

diff --git a/examples/clerk-auth/pages/login.tsx → ...ples/clerk-auth/app/(auth)/login/page.tsx b/examples/clerk-auth/pages/login.tsx → ...ples/clerk-auth/app/(auth)/login/page.tsx
@@ -1,16 +1,18 @@
+'use client'
+
 import { Stack, Card, CardBody } from '@chakra-ui/react'
 import { Auth, AvailableProviders, useAuth } from '@saas-ui/auth'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import React from 'react'
 
-import { FaGithub } from 'react-icons/fa'
-import { Logo } from '../components/Logo'
+import { FaGoogle } from 'react-icons/fa'
+import { Logo } from '../../../components/Logo'
 import { useSnackbar } from '@saas-ui/react'
 
 const providers: AvailableProviders = {
-  github: {
-    icon: FaGithub,
-    name: 'Github',
+  google: {
+    icon: FaGoogle,
+    name: 'Google',
   },
 }
 

diff --git a/examples/clerk-auth/pages/api/protected.ts → examples/clerk-auth/app/api/protected.ts b/examples/clerk-auth/pages/api/protected.ts → examples/clerk-auth/app/api/protected.ts
diff --git a/examples/clerk-auth/app/layout.tsx b/examples/clerk-auth/app/layout.tsx
@@ -0,0 +1,15 @@
+import Provider from './provider'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  )
+}
diff --git a/examples/clerk-auth/pages/index.tsx → examples/clerk-auth/app/page.tsx b/examples/clerk-auth/pages/index.tsx → examples/clerk-auth/app/page.tsx
@@ -1,4 +1,6 @@
-import { Box, Button } from '@chakra-ui/react'
+'use client'
+
+import { Box, Button, Center } from '@chakra-ui/react'
 import { LoadingOverlay, LoadingSpinner } from '@saas-ui/react'
 import { useAuth } from '@saas-ui/auth'
 import NextLink from 'next/link'
@@ -14,19 +16,21 @@ const IndexPage = () => {
     )
   } else if (!user) {
     return (
-      <Box>
+      <Center h="$100vh">
         <NextLink href="/login" legacyBehavior>
-          <Button>Log in</Button>
+          <Button variant="primary" size="lg">
+            Log in
+          </Button>
         </NextLink>
-      </Box>
+      </Center>
     )
   }
 
   return (
-    <Box>
+    <Center h="$100vh">
       Logged in as: {user.email}.{' '}
       <Button onClick={() => logOut()}>Log out</Button>
-    </Box>
+    </Center>
   )
 }
 

diff --git a/examples/clerk-auth/app/provider.tsx b/examples/clerk-auth/app/provider.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { SaasProvider } from '@saas-ui/react'
+import { ClerkAuthProvider } from '@saas-ui/clerk/src'
+import { AuthProvider } from '@saas-ui/auth'
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkAuthProvider
+      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
+    >
+      {({ authService }) => (
+        <SaasProvider>
+          <AuthProvider {...authService}>{children}</AuthProvider>
+        </SaasProvider>
+      )}
+    </ClerkAuthProvider>
+  )
+}