sidebase/nuxt-auth-example

A example application using nuxt-auth.

nuxt-auth-example's Issues

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

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

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

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

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

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

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