Merge pull request #5 from frorong/feature/oAuth

Add github oAuth

.eslintrc

@@ -14,12 +14,6 @@
       "error",
       "as-needed",
     ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": ["../"],
-      },
-    ],
     "no-console": "error",
     "no-unused-vars": "error",
   },

package.json

@@ -11,6 +11,8 @@
     "format": "pnpx prettier --write \"src/**/*.svelte\""
   },
   "devDependencies": {
+    "@auth/core": "^0.28.1",
+    "@auth/sveltekit": "^0.14.1",
     "@fontsource/fira-mono": "^4.5.10",
     "@neoconfetti/svelte": "^1.0.0",
     "@sveltejs/adapter-auto": "^3.0.0",

src/auth.ts

@@ -0,0 +1,23 @@
+import { SvelteKitAuth } from '@auth/sveltekit'
+import GitHub from '@auth/sveltekit/providers/github'
+import {
+  GITHUB_ID,
+  GITHUB_SECRET,
+  AUTH_SECRET,
+  AUTH_TRUST_HOST,
+} from '$env/static/private'
+
+export const {
+  handle,
+  signIn,
+  signOut,
+} = SvelteKitAuth({
+  providers: [
+    GitHub({
+      clientId: GITHUB_ID,
+      clientSecret: GITHUB_SECRET,
+    }),
+  ],
+  secret: AUTH_SECRET,
+  trustHost: Boolean(AUTH_TRUST_HOST),
+})

src/components/githubLoginButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let onClick: () => void
+</script>
+
+<button
+  class="flex items-center justify-center rounded-md border border-gray-300 bg-gray-800 px-4 py-2 text-white outline-none hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+  on:click="{onClick}"
+>
+  <svg
+    class="mr-2 h-4 w-4"
+    fill="currentColor"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+    ></path>
+  </svg>
+  Sign in with GitHub
+</button>

src/components/logoutButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let onClick: () => void
+</script>
+
+<button
+  class="flex items-center justify-center rounded-md border border-gray-300 bg-gray-800 px-4 py-2 text-white outline-none hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+  on:click="{onClick}"
+>
+  <svg
+    class="mr-2 h-4 w-4"
+    fill="currentColor"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M3.646 3.354a.5.5 0 00-.708 0l-2.5 2.5a.5.5 0 000 .708l2.5 2.5a.5.5 0 00.708-.708L2.707 6H8.5a.5.5 0 000-1H2.707l1.94-1.94a.5.5 0 000-.708zM9.5 0a.5.5 0 01.5.5v3a.5.5 0 01-1 0v-2.793l-1.146 1.147a.5.5 0 11-.708-.708l2-2A.5.5 0 019.5 0zM1 8.5a.5.5 0 01.5-.5H6a.5.5 0 010 1H1.5a.5.5 0 01-.5-.5zM8.5 10a.5.5 0 01.5.5v3a.5.5 0 01-1 0v-2.793l-1.146 1.147a.5.5 0 11-.708-.708l2-2A.5.5 0 018.5 10zM14 8.5a.5.5 0 01.5-.5H18a.5.5 0 010 1h-3.5a.5.5 0 01-.5-.5zM18 6h-5.793l1.147-1.146a.5.5 0 10-.708-.708l-2 2a.5.5 0 000 .708l2 2a.5.5 0 10.708-.708L12.707 6H18a.5.5 0 010 1z"
+    ></path>
+  </svg>
+  Logout
+</button>

src/hooks.server.ts

@@ -0,0 +1 @@
+export { handle } from './auth'

src/routes/+layout.server.ts

@@ -0,0 +1,6 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load: LayoutServerLoad =
+  async (event) => ({
+    session: await event.locals.auth(),
+  })

src/routes/+page.svelte

@@ -1,16 +1,86 @@
 <script lang="ts">
   export let data
+  import { page } from '$app/stores'
+  import {
+    signIn,
+    signOut,
+  } from '@auth/sveltekit/client'
+
+  if ($page.data.session) {
+    console.log($page.data.session.user)
+  }
+
+  import GithubLoginButton from '@components/githubLoginButton.svelte'
+  import LogoutButton from '@components/logoutButton.svelte'
 </script>
 
 <section>
   <div
     class="container mx-auto px-6 py-10"
   >
-    <h1
-      class="text-2xl font-semibold capitalize"
-    >
-      메인 페이지는 업데이트 예정입니다.
-    </h1>
+    <div>
+      {#if $page.data.session}
+        <div
+          class="flex items-center space-x-4"
+        >
+          {#if $page.data.session.user?.image}
+            <img
+              src="{$page.data.session
+                .user.image}"
+              alt="프로필 이미지"
+              class="h-12 w-12 rounded-full"
+            />
+          {/if}
+          <div>
+            <h1
+              class="text-xl font-semibold"
+            >
+              {$page.data.session.user
+                ?.name ??
+                '익명의 유저'}님
+              안녕하세요!
+            </h1>
+            <p class="text-gray-600">
+              email: {$page.data.session
+                .user?.email ??
+                'email이 존재하지 않습니다.'}
+            </p>
+          </div>
+          <div>
+            <LogoutButton
+              onClick="{() =>
+                signOut({
+                  callbackUrl: '/',
+                })}"
+            >
+              로그아웃
+            </LogoutButton>
+          </div>
+        </div>
+      {:else}
+        <div
+          class="border-l-4 border-blue-500 bg-blue-100 p-4 text-blue-800"
+          role="alert"
+        >
+          <p class="font-bold">
+            아직 로그인하지 않았습니다!
+          </p>
+          <p>
+            커뮤니티를 이용하기 위해서는
+            로그인이 필요합니다.
+          </p>
+        </div>
+
+        <div
+          class="my-8 h-px w-full bg-slate-400"
+        ></div>
+
+        <GithubLoginButton
+          onClick="{() =>
+            signIn('github')}"
+        />
+      {/if}
+    </div>
     <!-- <div
       class="mt-8 flex flex-col space-y-10"
     >

src/routes/community/+page.server.ts

@@ -0,0 +1,11 @@
+import { redirect } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad =
+  async (event) => {
+    const session =
+      await event.locals.auth()
+    if (!session?.user)
+      throw redirect(303, '/auth')
+    return {}
+  }

src/routes/signin/+page.server.ts

@@ -0,0 +1,5 @@
+import { signIn } from '../../auth'
+import type { Actions } from './$types'
+export const actions: Actions = {
+  default: signIn,
+}

src/routes/signout/+page.server.ts

@@ -0,0 +1,5 @@
+import { signOut } from '../../auth'
+import type { Actions } from './$types'
+export const actions: Actions = {
+  default: signOut,
+}