Merge pull request #3 from Amateur0x1/feature/login

feat: add OAuth implementation

src/components/forms/user-auth-form.tsx

@@ -9,23 +9,25 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
 import { Icons } from '@/components/icons'
-// import GoogleSignInButton from '../github-auth-button'
+// import GithubSignInButton from '../github-auth-button'
+
+const CLIENT_ID = 'Ov23li86Nz0RcXbj54Z5'
+const REDIRECT_URI = 'http://localhost:3000/auth/github/callback'
 
 const signIn = (...args: unknown[]) => {
   location.href = '/'
 }
 
-function GoogleSignInButton() {
-  const searchParams = new URLSearchParams(useLocation().search)
-  const callbackUrl = searchParams.get('callbackUrl')
+const githubOAuth = () => {
+  window.location.href = `http://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=user:email`
+}
+
+const GithubSignInButton = () => {
+  // const searchParams = new URLSearchParams(useLocation().search)
+  // const callbackUrl = searchParams.get('callbackUrl')
 
   return (
-    <Button
-      className="w-full"
-      variant="outline"
-      type="button"
-      onClick={() => signIn('github', { callbackUrl: callbackUrl ?? '/dashboard' })}
-    >
+    <Button className="w-full" variant="outline" type="button" onClick={() => githubOAuth()}>
       <Icons.github className="w-4 h-4 mr-2" />
       Continue with Github
     </Button>
@@ -88,7 +90,7 @@ export default function UserAuthForm() {
           <span className="px-2 bg-background text-muted-foreground">Or continue with</span>
         </div>
       </div>
-      <GoogleSignInButton />
+      <GithubSignInButton />
     </>
   )
 }

src/constants/data.ts

@@ -29,6 +29,13 @@ export const navItems: NavItem[] = [
     description: 'Authentication forms built using the components.',
     hideInMenu: true,
   },
+  {
+    title: 'Redirect',
+    href: '/auth/github/callback',
+    component: 'callback',
+    description: 'Redirect route.',
+    hideInMenu: true,
+  },
 ]
 
 export const projectItems: ProjectItem[] = [

src/pages/callback/index.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const Callback = () => {
+  const location = useLocation()
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search)
+    const code = searchParams.get('code')
+
+    if (code) {
+      fetch(`http://183.131.108.116:3000/auth/github?code=${code}`)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log('User info:', data)
+          // 在此处处理用户信息，例如保存到状态或重定向到其他页面
+        })
+        .catch((error) => {
+          console.error('Error fetching user info:', error)
+        })
+    }
+    // setTimeout(() => {
+    //   window.location.href = '/'
+    // }, 5000) // 5000 毫秒即 5 秒
+  })
+
+  return (
+    <div>
+      <p>Redirecting...5s后自动跳转回去</p>
+    </div>
+  )
+}
+
+export default Callback

src/router/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { createHashRouter, RouteObject } from 'react-router-dom'
+import { createBrowserRouter, RouteObject } from 'react-router-dom'
 
 import { navItems } from '@/constants/data'
 import { Pages } from '@/router/pages'
@@ -29,7 +29,7 @@ const routerObjects: RouteObject[] = navItems.map((item) => {
   }
 })
 
-export function createRouter(): ReturnType<typeof createHashRouter> {
+export function createRouter(): ReturnType<typeof createBrowserRouter> {
   const routeWrappers = routerObjects.map((router) => {
     const Component = router.Component
     const page = Component ? <Component /> : null
@@ -40,5 +40,5 @@ export function createRouter(): ReturnType<typeof createHashRouter> {
       // ErrorBoundary: ErrorPage,
     }
   })
-  return createHashRouter(routeWrappers)
+  return createBrowserRouter(routeWrappers)
 }

src/router/pages.tsx

@@ -2,10 +2,11 @@ import Dashboard from '@/pages/dashboard'
 import Task from '@/pages/task'
 import Project from '@/pages/project'
 import Login from '@/pages/login'
-
+import Callback from '@/pages/callback'
 export const Pages = {
   dashboard: Dashboard,
   task: Task,
   project: Project,
   login: Login,
+  callback: Callback,
 }

vite.config.ts

@@ -26,6 +26,6 @@ export default defineConfig({
   },
   server: {
     host: true,
-    port: 5000,
+    port: 3000,
   },
 })