docs(#795): add example apps for each provider

examples/authjs/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/authjs/.npmrc

@@ -0,0 +1,3 @@
+
+shamefully-hoist=true
+strict-peer-dependencies=false

examples/authjs/README.md

@@ -0,0 +1,53 @@
+# Authjs Example App (`@sidebase/nuxt-auth`)
+
+This is a [sidebase merino](https://sidebase.io/) app created by running `pnpm create sidebase@latest`. This project uses the following technologies for a great developer- and user-experience:
+- [TypeScript](https://www.typescriptlang.org/)
+- [Nuxt 3](https://nuxt.com)
+- Tailwind CSS
+- nuxt-auth
+- GitHub Actions based CI
+- Linting via ESLint and @antfu/eslint-config
+
+## How to get going?
+
+This is a straight-forward setup with minimal templating and scaffolding. The options you selected during the sidebase CLI setup are all here though. Good places to continue reading are:
+- [the First Steps documentation](https://sidebase.io/sidebase/usage)
+- [our discord](https://discord.gg/auc8eCeGzx)
+
+Some tasks you should probably do in the beginning are:
+- [ ] replace this generic README with a more specific one
+- [ ] install the Vue Volar extension
+- [ ] enable [Volar takeover mode](https://nuxt.com/docs/getting-started/installation#prerequisites) to ensure a smooth editor setup
+- [ ] [install Nuxt 3 devtools](https://github.com/nuxt/devtools#installation) if you want to use them
+- [ ] Auth: Configure your auth providers to the [NuxtAuthHandler](./server/api/auth/[...].ts)
+- [ ] Auth, optional: Enable global protection by setting `enableGlobalAppMiddleware: true` in [your nuxt.config.ts](./nuxt.config.ts). Delete the local middleware in the [protected.vue](./pages/protected.vue) page if you do
+
+### Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+### Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm run dev
+```
+
+### Production
+
+Build the application for production:
+
+```bash
+pnpm run build
+```
+
+Locally preview production build:
+
+```bash
+pnpm run preview
+```

examples/authjs/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

examples/authjs/components/Welcome/AuthDemo.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const { status, data, signIn, signOut } = useAuth()
+</script>
+
+<template>
+  <div class="layout">
+    <div class="group">
+      <h1 class="heading">
+        Authentication
+      </h1>
+      <p class="description">
+        Nuxt user authentication and sessions through nuxt-auth. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX)
+      </p>
+    </div>
+    <div class="group">
+      <p v-if="status === 'authenticated'">
+        Logged in as "{{ data?.user?.name }}"
+      </p>
+      <p v-else>
+        Not logged in.
+      </p>
+      <div class="actions">
+        <WelcomeButtonLink href="https://sidebase.io/nuxt-auth/getting-started" :blank="true">
+          Documentation
+        </WelcomeButtonLink>
+        <WelcomeButtonLink v-if="status !== 'authenticated'" @click="signIn">
+          Sign in
+        </WelcomeButtonLink>
+        <WelcomeButtonLink v-else @click="signOut">
+          Sign out
+        </WelcomeButtonLink>
+      </div>
+    </div>
+  </div>
+</template>

examples/authjs/components/Welcome/ButtonLink.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps({
+  blank: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <NuxtLink class="ButtonLink" :to="href" :target="blank ? '_blank' : undefined">
+    <slot />
+  </NuxtLink>
+</template>
+
+<style scoped>
+.ButtonLink {
+  position: relative;
+  padding: 5px 15px;
+  color: white;
+  background-image: linear-gradient(160deg, #059669, #059669);
+  border-radius: 0.3rem;
+  cursor: pointer;
+  user-select: none;
+  transition: box-shadow 0.6s;
+}
+.ButtonLink:hover {
+  box-shadow: 0 0 60px 2px #059669, 0.5rem 0.5rem 30px #059669;
+}
+.ButtonLink:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  left: 2px;
+  border-radius: 0.75rem;
+  pointer-events: none;
+}
+</style>

examples/authjs/components/Welcome/TailwindDemo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="layout">
+    <div class="group">
+      <h1 class="heading">
+        TailwindCSS
+      </h1>
+      <p class="description">
+        Rapidly build modern websites without ever leaving your HTML.
+      </p>
+    </div>
+    <div class="group">
+      <div class="actions">
+        <WelcomeButtonLink href="https://sidebase.io/sidebase/components/tailwindcss" :blank="true">
+          Documentation
+        </WelcomeButtonLink>
+        <WelcomeButtonLink href="/_tailwind/" :blank="true">
+          Tailwind viewer
+        </WelcomeButtonLink>
+      </div>
+    </div>
+  </div>
+</template>

examples/authjs/eslint.config.js

@@ -0,0 +1,41 @@
+import antfu from '@antfu/eslint-config'
+
+const ignores = [
+  '.nuxt',
+  '**/.nuxt/**',
+  '.output',
+  '**/.output/**',
+  'node_modules',
+  '**/node_modules/**',
+  'public',
+  '**/public/**',
+]
+
+export default antfu({
+  // .eslintignore is no longer supported in Flat config, use ignores instead
+  ignores,
+
+  // Stylistic formatting rules
+  stylistic: {
+    indent: 2,
+    quotes: 'single',
+  },
+
+  // TypeScript and Vue are auto-detected, you can also explicitly enable them
+  typescript: true,
+  vue: true,
+
+  // Disable jsonc and yaml support
+  jsonc: false,
+  yaml: false,
+
+  // Overwrite certain rules to your preference
+  rules: {
+    'no-console': ['error', {
+      allow: ['info', 'warn', 'trace', 'error', 'group', 'groupEnd'],
+    }],
+    'style/comma-dangle': 'off',
+    'curly': ['error', 'all'],
+    'node/prefer-global/process': ['error', 'always'],
+  },
+})

examples/authjs/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@sidebase/nuxt-auth'
+  ],
+  typescript: {
+    shim: false
+  }
+})

examples/authjs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "NODE_ENV=production node .output/server/index.mjs",
+    "typecheck": "nuxt typecheck",
+    "lint:fix": "eslint . --fix",
+    "lint": "oxlint --deny-warnings -D correctness -D suspicious -D perf && eslint --max-warnings 0 .",
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.12.2",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3"
+  },
+  "devDependencies": {
+    "@sidebase/nuxt-auth": "^0.7.2",
+    "@nuxtjs/tailwindcss": "^6.11.4",
+    "@types/node": "^20.11.30",
+    "typescript": "^5.4.3",
+    "vue-tsc": "^2.0.7",
+    "oxlint": "^0.2.15",
+    "@antfu/eslint-config": "^2.11.5",
+    "eslint": "^8.57.0"
+  },
+  "peerDependencies": {
+    "next-auth": "4.21.1"
+  }
+}