Skip to content

Commit

Permalink
feat: Revamp NuxtAuth Example to use sidebase and version 0.6.0 (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
zoey-kaiser authored Nov 13, 2023
1 parent 321fded commit 8272bdb
Show file tree
Hide file tree
Showing 26 changed files with 9,308 additions and 18,752 deletions.
15 changes: 15 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
root = true

[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[**.{json,js,ts,y{a,}ml}]
indent_style = space
indent_size = 2

[*.md]
indent_style = space
indent_size = 4
4 changes: 2 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
GITHUB_CLIENT_ID="YOUR_GIHUB_APPLICATION_ID"
GITHUB_CLIENT_SECRET="YOUR_GIHUB_APPLICATION_SECRET"
NUXT_SECRET="YOUR_NUXT_SECRET"
ORIGIN="YOUR_ORIGIN"
AUTH_SECRET="YOUR_NUXT_SECRET"
AUTH_ORIGIN="YOUR_ORIGIN"
CERTBOT_DOMAIN="YOUR_DOMAIN"
CERTBOT_EMAIL="YOUR_ADMIN_EMAIL"
11 changes: 11 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# ignore generate imports
auto-imports.d.ts
components.d.ts
nuxt.d.ts

# nuxt and other artefacts
.nuxt
.output
node_modules
dist
public
33 changes: 33 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"root": true,
"env": {
"browser": true,
"node": true
},
"extends": [
"@nuxtjs/eslint-config-typescript"
],
"rules": {
"vue/multi-word-component-names": "off"
},
"overrides": [
{
"files": [
"./server/**/*.ts"
],
"rules": {
"no-console": [
"error",
{
"allow": [
"info",
"warn",
"trace",
"error"
]
}
]
}
}
]
}
47 changes: 35 additions & 12 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
@@ -1,30 +1,53 @@
name: nodejs CI

name: CI

on:
push:
branches: [main]
branches: [ main ]
pull_request:
branches: [main]
branches: [ main ]

jobs:
test:
lint:

runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3

- name: Use Node.js 16.14.2
uses: actions/setup-node@v3
with:
node-version: 16.14.2

- name: Setup
run: npm i -g @antfu/ni

- name: Install
run: nci

- name: Lint
run: nr lint

build:

runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3

- name: Use Node.js 16.14.2
uses: actions/setup-node@v3
with:
node-version: 16.14.2

# Install locked dependencies and prepare types
- run: npm ci
- name: Setup
run: npm i -g @antfu/ni

# Check building
- run: npm run build
- name: Install
run: nci

# start dev-app and curl from it
- run: "timeout 30 npm run dev & (sleep 10 && curl --fail localhost:3000)"
- name: Build
run: nr build

# start prod-app and curl from it
- run: "timeout 30 npm run start & (sleep 10 && curl --fail localhost:3000)"
# TODO: Add more steps here, like "nr test" as you add the tooling for it
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ node_modules
.output
.env
dist
*.sqlite
3 changes: 3 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

shamefully-hoist=true
strict-peer-dependencies=false
8 changes: 8 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"recommendations": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"vue.volar",
"bradlc.vscode-tailwindcss"
]
}
30 changes: 30 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
// Use `eslint` for vue, ts and js
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[js]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[ts]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
"javascript",
"typescript",
"vue"
],
// Tailwind Support, see https://tailwindcss.nuxt.dev/tailwind/editor-support
"tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs",
"files.associations": {
"*.css": "tailwindcss"
},
// Auto-complete `.value` attribute when volar is installed
"volar.autoCompleteRefs": true,
}
11 changes: 7 additions & 4 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
# see https://docs.docker.com/engine/reference/builder/#understand-how-arg-and-from-interact
ARG NODE_VERSION=node:16.14.2
ARG NODE_VERSION=node:20.6.1

FROM $NODE_VERSION AS dependency-base

# install pnpm
RUN npm i -g pnpm

# create destination directory
RUN mkdir -p /app
WORKDIR /app

# copy the app, note .dockerignore
COPY package.json .
COPY package-lock.json .
RUN npm ci
COPY pnpm-lock.yaml .
RUN pnpm i

FROM dependency-base AS production-base

# build will also take care of building
# if necessary
COPY . .
RUN npm run build
RUN pnpm build

FROM $NODE_VERSION-slim AS production

Expand Down
12 changes: 6 additions & 6 deletions app.vue
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
<script setup lang="ts">
useHead({
title: '🔐 nuxt-auth-example'
})
</script>

<template>
<div class="min-h-screen h-full relative bg-gray-100 pb-20">
<Navbar />
Expand All @@ -8,9 +14,3 @@
<NuxtPage />
</div>
</template>

<script setup lang="ts">
useHead({
title: '🔐 nuxt-auth-example',
})
</script>
48 changes: 24 additions & 24 deletions components/AuthenticationStatus.vue
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<script setup lang="ts">
const { status, data, signOut, signIn } = useSession()
const { status, data, signOut, signIn } = useAuth()
</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
v-if="status === 'authenticated' && data?.user?.image"
class="w-12 h-12 rounded-full"
:src="data.user.image"
alt="User Avatar"
/>
<h1 v-if="status === 'authenticated'" class="text-lg">
Authenticated as {{ data?.user?.name }}!
</h1>
<h1 v-else>
Not logged in
</h1>
</div>
<button v-if="status === 'authenticated'" class="flex items-center justify-center space-x-2 bg-red-500 text-white rounded-lg py-2 px-3 text-lg" @click="signOut({ callbackUrl: '/' })">
<span>Logout</span>
</button>
<button v-else class="flex items-center justify-center space-x-2 bg-green-500 text-white rounded-lg py-2 px-3 text-lg" @click="signIn()">
<i class="fa fa-right-to-bracket pt-0.5" />
<span>Login</span>
</button>
<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
v-if="status === 'authenticated' && data?.user?.image"
class="w-12 h-12 rounded-full"
:src="data.user.image"
alt="User Avatar"
>
<h1 v-if="status === 'authenticated'" class="text-lg">
Authenticated as {{ data?.user?.name }}!
</h1>
<h1 v-else>
Not logged in
</h1>
</div>
<button v-if="status === 'authenticated'" class="flex items-center justify-center space-x-2 bg-red-500 text-white rounded-lg py-2 px-3 text-lg" @click="signOut({ callbackUrl: '/' })">
<span>Logout</span>
</button>
<button v-else class="flex items-center justify-center space-x-2 bg-green-500 text-white rounded-lg py-2 px-3 text-lg" @click="signIn()">
<i class="fa fa-right-to-bracket pt-0.5" />
<span>Login</span>
</button>
</div>
</div>
</template>
42 changes: 21 additions & 21 deletions components/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,62 @@
<a href="https://github.com/sidebase/nuxt-auth" 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">
<div id="navbar-default" class="w-full md:w-auto">
<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"
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"
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/locally"
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"
href="/protected/locally"
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"
>
Locally Unprotected
</nuxt-link>
</li>
<li>
<nuxt-link
href="/api-routes"
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"
href="/api-routes"
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"
>
API Routes
</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"
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]" />
<Icon name="mdi:github" size="22" />
</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"
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]" />
<Icon name="mdi:twitter" size="22" />
</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"
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]" />
<Icon name="mdi:discord" size="22" />
</a>
</li>
</ul>
Expand Down
12 changes: 0 additions & 12 deletions components/Protected.vue

This file was deleted.

Loading

0 comments on commit 8272bdb

Please sign in to comment.