sidebase/nuxt-auth-example

A example application using nuxt-auth.

sidebase

sidebase is a web development kit to build production ready fullstack Nuxt 3 apps quickly. sidebase relies on modern, fully-typed and best-practice technology to achieve this goal. sidebase embraces the fullstack TypeScript approach to app development: Code sharing between client and server, reduced learning curve for engineers and code-reuse across apps are things we love about this approach. That said, you can also use sidebase to build client-side only apps.

Visit sidebase.io/sidebase for quick-start, docs, guides and more!

To get started, run:

npm create sidebase@latest

And you are ready to go! The sidebase CLI will guide you through the process. Afterwards, or if you still want to know more, read the documentation to continue.

Features

With sidebase you can build production ready, robust, maintainable, fullstack applications:

• 🎒 Fullstack: Develop frontend and backend in a single TypeScript code base
• 🏎️ Fast to code: Database, example tests, example components and example pages are all there for you to fill out
• 🐛 Fewer bugs: Strong data-validation using Prisma to validate all data coming into the database at runtime
• 😊 Easy to use: Designed to follow best practices and to be ready-to-go for development, without additional dev-dependencies like docker that make it hard to get started
• 🚀 Ready for launch: Github Actions CI, Dockerfile, easy switch to most popular SQL-databases are all there, out of the box (get in touch if you're missing something)

To facilitate this sidebase bootstraps a nuxt 3 project that permits developing a backend and a frontend using just Nuxt 3 with overarching TypeScript support. We want to show the world how enjoyable end-to-end typescript programming can be, displacing the myth that JS/TS-backends are no good. This starter solves a lot of the "real-world" problems that occur after you start using Nuxt or any other framework: How to write backend tests? How to write component tests? How to calculate test coverage? How to integrate a database? How to build a docker image? ...?

If you have any problems with this project (e.g., setting it up on your PC) open an issue and we'll figure it out together with you 🎉

License

MIT

nuxt-auth-example's Issues

Demo .env.example

Ask your question

Hello. Please fill in with an example file .env.example

I can't figure out how to fill it out correctly.

Additional information

No response

Investigate long loading times

Environment

No response

Reproduction

No response

Describe the bug

After deploying https://nuxt-auth-example.sidebase.io we noticed that the initial loading time is very high. This issue is to track down the reason and fix it, or add a loading indicator for when the page has not loaded yet.

Additional context

No response

Logs

No response

Auth middleware is using "signIn" method on server side

Environment

No response

Reproduction

No response

Describe the bug

I'm using:

  auth: {
    provider: {
      type: 'authjs'
    },
    globalAppMiddleware: true
  }

in nuxt.config.ts

Which means that it enables the default auth middleware:

import { navigateTo, defineNuxtRouteMiddleware, useRuntimeConfig } from "#app";
import { determineCallbackUrl } from "../utils/url.mjs";
import { useAuth } from "#imports";
export default defineNuxtRouteMiddleware((to) => {
 const metaAuth = typeof to.meta.auth === "object" ? {
   unauthenticatedOnly: true,
   ...to.meta.auth
 } : to.meta.auth;
 if (metaAuth === false) {
   return;
 }
 const authConfig = useRuntimeConfig().public.auth;
 const { status, signIn } = useAuth();
 const isGuestMode = typeof metaAuth === "object" && metaAuth.unauthenticatedOnly;
 if (isGuestMode && status.value === "unauthenticated") {
   return;
 }
 if (typeof metaAuth === "object" && !metaAuth.unauthenticatedOnly) {
   return;
 }
 if (status.value === "authenticated") {
   if (isGuestMode) {
     return navigateTo(metaAuth.navigateAuthenticatedTo ?? "/");
   }
   return;
 }
 if (authConfig.globalAppMiddleware.allow404WithoutAuth) {
   const matchedRoute = to.matched.length > 0;
   if (!matchedRoute) {
     return;
   }
 }
 if (authConfig.provider.type === "authjs") {
   const signInOptions = { error: "SessionRequired", callbackUrl: determineCallbackUrl(authConfig, () => to.path) };
   return signIn(void 0, signInOptions);
 } else if (typeof metaAuth === "object" && metaAuth.navigateUnauthenticatedTo) {
   return navigateTo(metaAuth.navigateUnauthenticatedTo);
 } else {
   return navigateTo(authConfig.provider.pages.login);
 }
});

But as you can see there is no "process.server" check before running "signIn" method. And as shown in documentation: https://next-auth.js.org/getting-started/client#signin

this method is client side only.

This causes this error: [nuxt] [request error] [unhandled] [500] Cannot set headers after they are sent to the client

Additional context

No response

Logs

No response

add example of protected login pages when already authenticated

Ask your question

how to protect login page from being accessed when user is already authenticated? or probably this should added as a feature?

Additional information

No response

Add example for custom sign in page

Describe the feature

In sidebase/nuxt-auth#96 we added a custom signin page to the nuxt-auth playground. It might be helpful for developers to also see a preview of this in the nuxt-auth-example.

Additional information

No response

Issue running demo

Environment

---

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 3.3.2
• Nitro Version: 2.3.2
• Package Manager: [email protected]
• Builder: vite
• User Config: css, modules, auth
• Runtime Modules: @nuxtjs/[email protected], @sidebase/[email protected]
• Build Modules: -

Reproduction

git clone [email protected]:sidebase/nuxt-auth-example.git
cd nuxt-auth-example
echo 'shamefully-hoist=true' > .npmrc
echo 'auto-install-peers=true' >> .npmrc
pnpm install
pnpm run build
NUXT_SECRET=a-secret AUTH_ORIGIN=https://b-website.com ORIGIN=https://a-website.com PORT=3003 node .output/server/index.mjs

In another terminal

curl -v localhost:3003/protected/globally
#...
< HTTP/1.1 302 Found
< set-cookie: __Host-next-auth.csrf-token=f41225f307a199b55bf3244d9b0a7c2b2f3ac83297ced3117cf9f9e5b4826d80%7C47d8fb2dc0f16eab6150b67f8cc61ad6557d179d0b87174e8827612891457aff; Path=/; HttpOnly; Secure; SameSite=Lax,__Secure-next-auth.callback-url=https%3A%2F%2Fb-website.com; Path=/; HttpOnly; Secure; SameSite=Lax
< location: /api/auth/signin?callbackUrl=%2Fprotected%2Fglobally
# ...
<
* Connection #0 to host localhost left intact
<!DOCTYPE html><html><head><meta http-equiv="refresh" content="0; url=/api/auth/signin?callbackUrl=%2Fprotected%2Fglobally"></head></html>%

You can see that its using the __Secure-next-auth.callback-url=https%3A%2F%2Fb-website.com; b-website

Describe the bug

1. The demo is out of date with the library and uses ORIGIN in docs but the framework wants AUTH_ORIGIN. So you can see from the reproduction I have to add both.

This has caused a fair bit of confusion as I'm trying to implement nuxt-auth.

Additional context

I'm also curious why sometimes I've seen it redirect to an absolute path, and other times its a relative path. 🤔

Logs

No response

demo source code running in Gitpod get error of 502 and login fail in StackBlits

Environment

RootDir: /workspace/nuxt-auth-example 09:47:21
Nuxt project info: 09:47:21

---

• Operating System: Linux
• Node Version: v16.19.0
• Nuxt Version: 3.1.2
• Nitro Version: 2.1.2
• Package Manager: [email protected]
• Builder: vite
• User Config: css, modules, auth
• Runtime Modules: @nuxtjs/[email protected], @sidebase/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/sidebase/nuxt-auth-example.git

Describe the bug

open the source code with Gitpod, export env varible, and npm run start. when login get error as "This page isn’t working" which url is "https://sidebase-nuxtauthexampl-6cxmiofy627.ws-us88.gitpod.io/api/auth/callback/credentials"

Request URL: https://sidebase-nuxtauthexampl-6cxmiofy627.ws-us88.gitpod.io/api/auth/callback/credentials
Request Method: POST
Status Code: 502
Remote Address: 127.0.0.1:1080
Referrer Policy: strict-origin-when-cross-origin

Additional context

No response

Logs

No response

use Credentials to login ,the resopose url is localhost, please hwo to fix it, ?

Ask your question

my env is :

GITHUB_CLIENT_ID

#GITHUB_CLIENT_SECRET
NUXT_SECRET="feijign_random_string"
ORIGIN=http://121.5.146.136:3000/

CERTBOT_DOMAIN="YOUR_DOMAIN"

CERTBOT_EMAIL="YOUR_ADMIN_EMAIL"

---

is I must to config the CERTBOT_DOMAIN?

Additional information

No response

Polish & Expand show-case to show off more features

Describe the feature

Some features exist that are not yet part of the demo:

• getToken
• direct signIn with provider, e.g., via signIn('github') or signIn('credentials', {username: 'a', password: 'b'})

These should be show-cased as well.

Polishing:

• upgrade to @sidebase/[email protected]
• fix failing tests
• #3

[1]: bar that flickers when logged in:

Additional information

No response