docs(SettingsDrawer): add auth0 github login

.github/workflows/ci.yml

@@ -217,6 +217,8 @@ jobs:
           VITE_EMAILJS_PUBLIC_KEY: ${{ secrets.EMAILJS_PUBLIC_KEY }}
           VITE_EMAILJS_SERVICE_ID: ${{ secrets.EMAILJS_SERVICE_ID }}
           VITE_EMAILJS_TEMPLATE_ID: ${{ secrets.EMAILJS_TEMPLATE_ID }}
+          VITE_AUTH0_DOMAIN: ${{ secrets.AUTH0_DOMAIN }}
+          VITE_AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
       - run: node scripts/deploy-and-alias.js ${{ github.ref }}
         env:
           NOW_TOKEN: ${{ secrets.NOW_TOKEN }}

packages/docs/.env.example

@@ -15,3 +15,8 @@ VITE_COSMIC_BUCKET_READ_KEY_STORE=
 VITE_EMAILJS_SERVICE_ID=
 VITE_EMAILJS_TEMPLATE_ID=
 VITE_EMAILJS_PUBLIC_KEY=
+
+# Auth0
+VITE_AUTH0_DOMAIN=
+VITE_AUTH0_CLIENT_ID=
+VITE_AUTH0_CLIENT_SECRET=

packages/docs/package.json

@@ -21,6 +21,7 @@
     "fix:md": "markdownlint --config .markdownlintrc src/pages/en --fix"
   },
   "dependencies": {
+    "@auth0/auth0-vue": "^2.2.0",
     "@vuelidate/core": "^2.0.1",
     "@vuelidate/validators": "^2.0.1",
     "algoliasearch": "^4.16.0",

packages/docs/src/components/app/settings/Append.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-divider />
+
+  <v-list-item
+    :prepend-avatar="user?.picture"
+    :prepend-icon="isAuthenticated ? undefined : 'mdi-github'"
+    :append-icon="isAuthenticated ? 'mdi-logout-variant' : 'mdi-login-variant'"
+    :title="isAuthenticated ? user?.name : 'Login w/ GitHub'"
+    :subtitle="user?.email"
+    :link="!isAuthenticated"
+    lines="two"
+    @click="onClick"
+  >
+    <template #append>
+      <v-icon v-if="isAuthenticated" @click="onClickLogout" />
+      <v-icon v-else />
+    </template>
+  </v-list-item>
+</template>
+
+<script setup>
+  // Composables
+  import { useAuth0 } from '@auth0/auth0-vue'
+
+  const { loginWithPopup, user, isAuthenticated, logout } = useAuth0()
+
+  function onClick () {
+    if (isAuthenticated.value) return
+
+    loginWithPopup()
+  }
+
+  function onClickLogout () {
+    logout({ logoutParams: { returnTo: window.location.origin } })
+  }
+</script>

packages/docs/src/components/app/settings/Drawer.vue

@@ -39,11 +39,16 @@
 
       <app-settings-dev />
     </v-container>
+
+    <template #append>
+      <app-settings-append />
+    </template>
   </v-navigation-drawer>
 </template>
 
 <script setup>
   // Components
+  import AppSettingsAppend from './Append.vue'
   import AppSettingsApi from './Api.vue'
   import AppSettingsRtl from './Rtl.vue'
   import AppSettingsTheme from './Theme.vue'

packages/docs/src/main.ts

@@ -11,6 +11,7 @@ import { setupLayouts } from 'virtual:generated-layouts'
 // Plugins
 import { pinia, usePinia } from '@/plugins/pinia'
 import { useGlobalComponents } from '@/plugins/global-components'
+import { useAuth0 } from '@/plugins/auth'
 import { useGtag } from '@/plugins/gtag'
 import { useI18n } from '@/plugins/i18n'
 import { useLocaleStore } from '@/store/locale'
@@ -110,6 +111,7 @@ export const createApp = ViteSSG(
     })
 
     useGlobalComponents(ctx)
+    useAuth0(ctx)
     useGtag(ctx)
     useI18n(ctx)
     usePwa(ctx)

packages/docs/src/plugins/auth.ts

@@ -0,0 +1,24 @@
+// Composables
+import pkg from '@auth0/auth0-vue'
+
+// Types
+import type { ViteSSGContext } from '@vuetify/vite-ssg'
+
+// Globals
+import { IN_BROWSER } from '@/util/globals'
+
+const { createAuth0 } = pkg
+
+export function useAuth0 (ctx: ViteSSGContext) {
+  if (!IN_BROWSER) return
+
+  ctx.app.use(
+    createAuth0({
+      domain: import.meta.env.VITE_AUTH0_DOMAIN,
+      clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
+      authorizationParams: {
+        redirect_uri: window.location.origin,
+      },
+    })
+  )
+}

yarn.lock

@@ -151,6 +151,19 @@
   resolved "https://registry.yarnpkg.com/@assemblyscript/loader/-/loader-0.10.1.tgz#70e45678f06c72fa2e350e8553ec4a4d72b92e06"
   integrity sha512-H71nDOOL8Y7kWRLqf6Sums+01Q5msqBW2KhDUTemh1tvY04eSkSXrK0uj/4mmY0Xr16/3zyZmsrxN7CKuRbNRg==
 
+"@auth0/auth0-spa-js@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@auth0/auth0-spa-js/-/auth0-spa-js-2.0.4.tgz#81f6b5d9f72617ed30ee53cdf27dcd7a216bf2da"
+  integrity sha512-NgD6Fkm5Xnbned1VjhEW8irm1/Y8AWtdSLexgLXNwwBVgfnYicCVBu8w75m2t+4QljXkTcI7IXVEFhVmxMuxaA==
+
+"@auth0/auth0-vue@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@auth0/auth0-vue/-/auth0-vue-2.2.0.tgz#5bf8265b12f1fb210b41abae75e72b0a0b0f4e91"
+  integrity sha512-a8kNj9wF/hJFD/izAZojOTNlny/sq3qvuV8KLUreoQ92uMQBYiHtuclVHbRqoYxl2bwCtFJccttEmyYW3gzHDA==
+  dependencies:
+    "@auth0/auth0-spa-js" "^2.0.4"
+    vue "^3.2.41"
+
 "@babel/cli@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.21.0.tgz#1868eb70e9824b427fc607610cce8e9e7889e7e1"
@@ -7946,10 +7959,10 @@ homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
-hookable@^5.5.1, "hookable@npm:strict-hookable@5.4.3":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/strict-hookable/-/strict-hookable-5.4.3.tgz#36130aba39465a29cf080000be471cc9267b321d"
-  integrity sha512-KfkDut346Cq3QtmDGAc3Ru3/tKbwQ1lwAaY3tM5tIWw4Fg1OBfBvgiNlwAJ38eM3BUgOeZHbe+Rvcdv+biwPTg==
+hookable@^5.5.1:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.5.3.tgz#6cfc358984a1ef991e2518cb9ed4a778bbd3215d"
+  integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
 
 hosted-git-info@^2.1.4, hosted-git-info@^2.7.1:
   version "2.8.8"
@@ -14189,7 +14202,7 @@ vue-tsc@^1.2.0:
     "@volar/vue-language-core" "1.2.0"
     "@volar/vue-typescript" "1.2.0"
 
-vue@^3.2.47:
+vue@^3.2.41, vue@^3.2.47:
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
   integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==