Designed a demo page using nuxt-auth (#2)

Co-authored-by: Valia Fetisov <[email protected]>

Dockerfile

@@ -0,0 +1,37 @@
+# see https://docs.docker.com/engine/reference/builder/#understand-how-arg-and-from-interact
+ARG NODE_VERSION=node:16.14.2
+
+FROM $NODE_VERSION AS dependency-base
+
+# create destination directory
+RUN mkdir -p /app
+WORKDIR /app
+
+# copy the app, note .dockerignore
+COPY package.json .
+COPY package-lock.json .
+RUN npm ci
+
+FROM dependency-base AS production-base
+
+# build will also take care of building
+# if necessary
+COPY . .
+RUN npm run build
+
+FROM $NODE_VERSION-slim AS production
+
+COPY --from=production-base /app/.output /app/.output
+
+# Service hostname
+ENV NUXT_HOST=0.0.0.0
+
+# Service version
+ARG NUXT_APP_VERSION
+ENV NUXT_APP_VERSION=${NUXT_APP_VERSION}
+
+# Run in production mode
+ENV NODE_ENV=production
+
+# start the app
+CMD [ "node", "/app/.output/server/index.mjs" ]

README.md

@@ -1,42 +1,39 @@
-# Nuxt User Example
+# Nuxt Auth Example
 
-Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+> This is an example project using [nuxt-auth](https://github.com/sidebase/nuxt-auth), the Nuxt3 authentication package built on [NextAuth](https://github.com/nextauthjs/next-auth).
+
+The deployed version can be found [here](https://nuxt-auth-example.sidebase.io).
+
+![sidebase-preview-for-light](.github/preview.png)
 
 ## Setup
 
 Make sure to install the dependencies:
 
 ```bash
-# yarn
-yarn install
-
-# npm
+# install dependencies
 npm install
 
-# pnpm
-pnpm install --shamefully-hoist
-```
-
-## Development Server
-
-Start the development server on http://localhost:3000
-
-```bash
+# run dev server
 npm run dev
-```
-
-## Production
 
-Build the application for production:
-
-```bash
+# build production
 npm run build
+
+# start production build
+node .output/server/index.mjs 
 ```
 
-Locally preview production build:
+## Environment variables
 
-```bash
-npm run preview
-```
+The test deployment is done via docker-compose with `nginx-certbot` image which automatically issues certificate for the domain. Please don't forget to create `.env` file in the project root, which will contain:
+
+- `GITHUB_CLIENT_*`
+  - `GITHUB_CLIENT_ID` - A [GitHub OAuth](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) Client Id
+  - `GITHUB_CLIENT_SECRET` - A [GitHub OAuth](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) secret
+- `NUXT_SECRET` - A random string used to generate authentication tokens
+- `NUXT_URL` - The URL of your authentication api (should be https://example.com/api/auth/)
+- `CERTBOT_*` - NuxtAuth requires a SSL certificate to run in production. We use Certbot to automatically generate these
+  - `CERTBOT_DOMAIN` - The domain for which the Certbot should register a certificate
+  - `CERTBOT_EMAIL` - The email under which the domain certificate will be registered
 
-Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

app.vue

@@ -1,5 +1,25 @@
 <template>
-  <div>
-    <NuxtWelcome />
+  <div class="min-h-screen h-full relative bg-gray-100 pb-20">
+    <Navbar />
+    <div class="fixed bottom-0 w-full">
+      <Authenticated v-if="data && status === 'authenticated'" :user-data="data.user" @signOut="() => signOut({ callbackUrl: '/' })" />
+      <NotAuthenticated v-else @signIn="signIn" />
+    </div>
+    <Welcome />
+    <NuxtPage />
   </div>
 </template>
+
+<script setup lang="ts">
+import { useSession } from '#imports'
+import Authenticated from "~/components/Authenticated.vue";
+import NotAuthenticated from "~/components/NotAuthenticated.vue";
+import Navbar from "~/components/Navbar.vue";
+import {useHead} from "#head";
+import Welcome from "~/components/Welcome.vue";
+const { data, status, signOut, signIn } = await useSession({ required: false })
+
+useHead({
+  title: '🔐 nuxt-auth-example',
+})
+</script>

components/Authenticated.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+export default {
+  props: {
+    userData: Object,
+  }
+}
+</script>
+
+<template>
+    <div class="w-full max-w-5xl mx-auto bg-white px-5 py-4 rounded-t shadow-xl">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-2">
+          <img
+              class="w-12 h-12 rounded-full"
+              :src="userData.image"
+              alt="User Avatar"
+          />
+          <h1 class="text-lg">
+            Authenticated as {{userData.name}}!
+          </h1>
+        </div>
+        <button class="flex items-center justify-center space-x-2 bg-red-500 text-white rounded-lg py-2 px-3 text-lg" @click="$emit('signOut')">
+          <span>Logout</span>
+        </button>
+      </div>
+    </div>
+</template>

components/Navbar.vue

@@ -0,0 +1,69 @@
+<template>
+  <nav class="border-gray-200 px-2 sm:px-4 py-2.5 bg-gray-900">
+    <div class="container flex flex-wrap justify-between items-center mx-auto">
+      <a href="https://github.com/sidebase/nuxt-user" target="_blank" class="flex items-center">
+        <span class="self-center text-xl font-semibold whitespace-nowrap text-white">🔐 nuxt-auth</span>
+      </a>
+      <div class="w-full md:w-auto" id="navbar-default">
+        <ul class="flex flex-col md:p-4 mt-4 py-2 bg-gray-50 rounded-lg border md:flex-row md:space-x-4 md:mt-0 md:text-sm md:font-medium md:border-0 bg-gray-800 md:bg-gray-900 border-gray-700">
+          <li>
+            <nuxt-link
+                href="/"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              Home
+            </nuxt-link>
+          </li>
+          <li>
+            <nuxt-link
+                href="/protected/globally"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              Globally Protected
+            </nuxt-link>
+          </li>
+          <li>
+            <nuxt-link
+                href="/protected/inline"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              Inline Protected
+            </nuxt-link>
+          </li>
+          <li>
+            <nuxt-link
+                href="/protected/named"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              Named Protected
+            </nuxt-link>
+          </li>
+          <li class="hidden md:block border-l-2 border-gray-700" />
+          <li class="flex items-center ml-2 md:space-x-4">
+            <a
+                target="_blank"
+                href="https://github.com/sidebase/nuxt-auth"
+                class="block py-2 pr-4 pl-3 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              <i class="fa-brands fa-github text-lg pt-[1px]" />
+            </a>
+            <a
+                target="_blank"
+                href="https://twitter.com/sidebase_io"
+                class="block py-2 pr-4 pl-3 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              <i class="fa-brands fa-twitter text-lg pt-[1px]" />
+            </a>
+            <a
+                target="_blank"
+                href="https://discord.gg/VzABbVsqAc"
+                class="block py-2 pr-4 pl-3 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              <i class="fa-brands fa-discord text-lg pt-[1px]" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>

components/Navigation.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="max-w-5xl w-full mx-auto">
+    <ul class="flex flex-wrap text-sm font-medium text-center text-gray-200">
+      <li class="mr-2">
+        <a href="#" aria-current="page" class="inline-block text-black px-4 py-2 bg-white rounded-t-lg active">Home</a>
+      </li>
+      <li class="mr-2">
+        <a href="#" class="inline-block px-4 py-2 rounded-t-lg hover:text-black hover:bg-gray-50">Providers</a>
+      </li>
+      <li>
+        <a class="inline-block px-4 py-2 text-gray-400 rounded-t-lg cursor-not-allowed">User Data</a>
+      </li>
+      <li class="mr-2">
+        <a href="#" class="inline-block px-4 py-2 rounded-t-lg hover:text-black hover:bg-gray-50">Protected Route</a>
+      </li>
+    </ul>
+  </div>
+</template>

components/NotAuthenticated.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="w-full max-w-5xl mx-auto bg-white px-5 py-4 rounded-t shadow-xl">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center space-x-2">
+        <h1 class="text-lg">
+          Not logged in
+        </h1>
+      </div>
+      <button class="flex items-center justify-center space-x-2 bg-green-500 text-white rounded-lg py-2 px-3 text-lg" @click="$emit('signIn')">
+        <i class="fa fa-right-to-bracket pt-0.5" />
+        <span>Login</span>
+      </button>
+    </div>
+  </div>
+</template>

components/Protected.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="text-center mt-10">
+    <h1 class="text-2xl font-bold">This route is protected!</h1>
+    <h3>{{route.path}} can only be accessed when logged in. Please login below.</h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useRoute} from "vue-router";
+
+const route = useRoute()
+</script>

components/Secret.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+export default {
+  props: {
+    protectionType: String,
+    href: String,
+  }
+}
+</script>
+
+<template>
+  <div class="text-center mt-10">
+    <h1 class="text-2xl font-bold">I'm a secret!</h1>
+    <h3>My protection works via an <a :href="href" target="_blank">{{protectionType}} middleware</a>.</h3>
+  </div>
+</template>
+
+<style scoped>
+a {
+  @apply text-green-600 underline hover:text-green-500;
+}
+</style>

components/Welcome.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="max-w-5xl mx-auto px-5 mt-5">
+    <h1 class="text-4xl font-bold mb-2">
+      🔐 nuxt-auth
+      <span class="text-xl font-light">
+        Nuxt user authentication, authorization and sessions via NextAuth.js
+      </span>
+    </h1>
+    <p>
+      You can use this page to explore the feature that nuxt-user has to offer. You can find the source code of this page <a href="https://github.com/sidebase/nuxt-user-example" target="_blank">here</a>.
+      For further information please refer to our documentation <a href="https://github.com/sidebase/nuxt-user" target="_blank">here</a>.
+    </p>
+    <p>
+      nuxt-auth also supports server side sessions. You can find the full documentation for this <a href="https://github.com/sidebase/nuxt-user#server-side-usage" target="_blank">here</a>.
+    </p>
+    <hr class="my-5" />
+  </div>
+</template>
+
+<style scoped>
+a {
+  @apply text-green-600 underline hover:text-green-500;
+}
+</style>

docker-compose.yml

@@ -0,0 +1,34 @@
+version: "3"
+
+services:
+
+  application:
+    restart: unless-stopped
+    expose:
+      - 3000
+    build:
+      context: .
+    environment:
+      - NUXT_SECRET=${NUXT_SECRET}
+      - NUXT_URL=${NUXT_URL}
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
+
+  reverse-proxy:
+    restart: unless-stopped
+    image: staticfloat/nginx-certbot
+    ports:
+      - 80:80/tcp
+      - 443:443/tcp
+    environment:
+      - CERTBOT_DOMAIN=${CERTBOT_DOMAIN}
+      - CERTBOT_EMAIL=${CERTBOT_EMAIL}
+      - ENVSUBST_VARS=CERTBOT_DOMAIN
+    volumes:
+      - letsencrypt:/etc/letsencrypt
+      - ./nginx.conf:/etc/nginx/user.conf.d/nginx.conf:ro
+    depends_on:
+      - application
+
+volumes:
+    letsencrypt: