sidebase / nuxt-auth

Authentication built for Nuxt 3! Easily add authentication via OAuth providers, credentials or Email Magic URLs!
https://auth.sidebase.io
MIT License
1.25k stars 162 forks source link

Barebones oauth authentik login flow #915

Open chrisjbrown opened 2 days ago

chrisjbrown commented 2 days ago

Environment

Reproduction

I believe this should be simple enough without a reproduction

Describe the bug

I'm trying to do a simple POC with sidebase/nuxt-auth + authentik. Following the docs I've only added the essential code needed to get up in running eg:

nuxt.config.ts

...
  modules: [
    '@sidebase/nuxt-auth',
  ],
  auth: {
    baseUrl: 'https://authentik.stage.my-app.dev/',
    provider: {
      type: 'authjs',
      defaultProvider: 'authentik',
    },
  },
...

~server/api/auth/[...].ts

import { NuxtAuthHandler } from '#auth'
import AuthentikProvider from 'next-auth/providers/authentik'

export default NuxtAuthHandler({
  secret: 'your-secret-here',
  providers: [
    AuthentikProvider.default({
      clientId: process.env.AUTHENTIK_ID,
      clientSecret: process.env.AUTHENTIK_SECRET,
    }),
  ],
})

~pages/admin.ts

...
definePageMeta({
  middleware: 'auth'
})
...

When navigating to this protected page. I'm redirected to http://localhost:3000/api/auth/signin?error=OAuthSignin the page has a "sign in with Authentik" button wrapped in a form with action="http://localhost:3000/api/auth/signin/authentik" But I'm expecting a button/form with link https://authentik.stage.my-app.dev/application/o/authorize/ or to be redirected directly to https://authentik.stage.my-app.dev/application/o/authorize/

am i missing something in my configuration?

Additional context

No response

Logs

On being navigated to the page with the "sign in with Authentik" without doing anything I see this server message

ERROR  [next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error only valid absolute URLs can be requested { error:
   { message: 'only valid absolute URLs can be requested',
     stack:
      'TypeError: only valid absolute URLs can be requested\n    at Issuer.request (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/openid-client@5.7.0/node_modules/openid-client/lib/helpers/request.js:71:11)\n    at Issuer.discover (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/openid-client@5.7.0/node_modules/openid-client/lib/issuer.js:144:36)\n    at openidClient (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/lib/oauth/client.js:16:41)\n    at getAuthorizationUrl (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/lib/oauth/authorization-url.js:70:49)\n    at Object.signin (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/routes/signin.js:38:60)\n    at AuthHandler (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/index.js:253:39)\n    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n    at Object.handler (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/@sidebase+nuxt-auth@0.9.2_magicast@0.3.5_next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@ope_6awtkeityqsaaeckwnvpjpgzeu/node_modules/@sidebase/nuxt-auth/dist/runtime/server/services/authjs/nuxtAuthHandler.js:43:24)\n    at async file:///Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/h3@1.12.0/node_modules/h3/dist/index.mjs:1975:19\n    at async Object.callAsync (file:///Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16)',
     name: 'TypeError' },
  providerId: 'authentik',
  message: 'only valid absolute URLs can be requested' }
chrisjbrown commented 1 day ago

I've also tried without using the AuthenticProvider and instead specifying the config myself

~server/api/auth/[...].ts

import { NuxtAuthHandler } from '#auth'

export default NuxtAuthHandler({
  secret: 'your-secret-here',
  providers: [
    {
      id: 'authentik',
      name: 'Authentik',
      type: 'oauth',
      authorization: {
        url: 'https://authentik.[redacted].dev/application/o/authorize/',
        params: { scope: 'openid email profile' },
      },
      token: {
        url: 'https://authentik.[redacted].dev/application/o/token/',
      },
      userinfo: {
        url: 'https://authentik.[redacted].dev/application/o/userinfo/',
      },
      clientId: '[redacted]',
      clientSecret: '[redacted]',
      checks: ['pkce', 'state'],
      profile(profile) {
        console.log('profile', profile)
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
        }
      },
    },
  ],
})

This does seem to get me to authentik and performing a login. However i'm navigated back to the page with button "login with authentik" and i see a server error

 ERROR  [next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error expected 200 OK, got: 307 Temporary Redirect { error:
   { OPError: expected 200 OK, got: 307 Temporary Redirect
       at processResponse (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/openid-client@5.7.0/node_modules/openid-client/lib/helpers/process_response.js:41:11)
       at Client.grant (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/openid-client@5.7.0/node_modules/openid-client/lib/client.js:1381:22)
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
       at async Client.callback (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/openid-client@5.7.0/node_modules/openid-client/lib/client.js:520:24)
       at async oAuthCallback (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/lib/oauth/callback.js:109:16)
       at async Object.callback (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/routes/callback.js:52:11)
       at async AuthHandler (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@opentelemetry+api@1.9.0_react-dom@18.3.1_rea_aas3ycjlkhfwuh7abkvimfqsn4/node_modules/next-auth/core/index.js:201:28)
       at Object.handler (/Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/@sidebase+nuxt-auth@0.9.2_magicast@0.3.5_next-auth@4.21.1_next@13.5.7_@babel+core@7.25.2_@ope_6awtkeityqsaaeckwnvpjpgzeu/node_modules/@sidebase/nuxt-auth/dist/runtime/server/services/authjs/nuxtAuthHandler.js:43:24)
       at async file:///Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/h3@1.12.0/node_modules/h3/dist/index.mjs:1975:19
       at async Object.callAsync (file:///Users/christopherbrown/source/chameleon-web/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16)
     name: 'OAuthCallbackError',
     code: undefined },
  providerId: 'authentik',
  message: 'expected 200 OK, got: 307 Temporary Redirect' }