Nuxt auth does not make a request after receiving pkce_code_verifier

[Icon003]

Hello, I have a problem when using @ nuxt / auth, I use it to interact with keycloak openID, with my settings. After I have passed the authorization, I am thrown to my page with pkce_code_verifier, but auth does not make a request to get tokens, if I do it manually with this code, then I will get tokens. What am I doing wrong, please tell me

	auth: {
		strategies: {
			keycloak: {
				scheme: 'oauth2',
				endpoints: {
					authorization: 'http://localhost:8080/auth/realms/test/protocol/openid-connect/auth',
					token: 'http://localhost:8080/auth/realms/test/protocol/openid-connect/token',
					logout: 'http://localhost:8080/auth/realms/test/protocol/openid-connect/logout'
				},
				token: {
					property: 'access_token',
					type: 'Bearer',
					maxAge: 1800
				},
				refreshToken: {
					property: 'refresh_token',
					maxAge: 60 * 60 * 24 * 30
				},
				responseType: 'code',
				accessType: 'offline',
				grantType: 'authorization_code',
				redirectUri: 'http://localhost:800/callback',
				logoutRedirectUri: undefined,
				clientId: 'new-auth-test',
				scope: ['openid', 'profile', 'email'],
				state: 'UNIQUE_AND_NON_GUESSABLE',
				codeChallengeMethod: 'S256',
			}
		}
	},

[davydnorris]

your redirectUri looks wrong - shouldn't it be localhost:8080 ?

[Icon003]

your redirectUri looks wrong - shouldn't it be localhost:8080 ?

No, the SSO server is on a different port

[davydnorris]

What about if you just set the endpoints.token property to be the url, not an object? All mine are just strings - this is what I am using to auth with a similar provider:

      appID: {
        scheme: 'oauth2',
        secret: authInfo.secret,
        endpoints: {
          authorization: authInfo.oAuthServerUrl + '/authorization',
          token: authInfo.oAuthServerUrl + '/token',
          userInfo: authInfo.oAuthServerUrl + '/userinfo',
          logout: process.env.BASEURL + '/logout'
        },
        responseType: 'code',
        responseMode: 'web_message',
        grantType: 'authorization_code',
        clientId: authInfo.clientId,
        scope: 'openid',
        codeChallengeMethod: 'S256'
      }

If you leave state out, it gets auto generated and is random. Also if you leave redirectUri out it defaults to /callback on the hosting server.

PS: logout url has hhttp typo - not important for this convo but it'll annoy you later :-)

[Icon003]

What about if you just set the endpoints.token property to be the url, not an object? All mine are just strings - this is what I am using to auth with a similar provider:

      appID: {
        scheme: 'oauth2',
        secret: authInfo.secret,
        endpoints: {
          authorization: authInfo.oAuthServerUrl + '/authorization',
          token: authInfo.oAuthServerUrl + '/token',
          userInfo: authInfo.oAuthServerUrl + '/userinfo',
          logout: process.env.BASEURL + '/logout'
        },
        responseType: 'code',
        responseMode: 'web_message',
        grantType: 'authorization_code',
        clientId: authInfo.clientId,
        scope: 'openid',
        codeChallengeMethod: 'S256'
      }

If you leave state out, it gets auto generated and is random. Also if you leave redirectUri out it defaults to /callback on the hosting server.

PS: logout url has hhttp typo - not important for this convo but it'll annoy you later :-)

I tried to do everything without using the object, it was a typo after the trial, sorry that I did not correct it immediately.
I also used an empty redirect, but it still works the same way.
Thanks for the typo, I corrected it)

[davydnorris]

OK one last thing I can think of - what package are you using? This capability is only in nuxtjs/auth-next, which will eventually replace nuxtjs/auth.

[Icon003]

OK one last thing I can think of - what package are you using? This capability is only in nuxtjs/auth-next, which will eventually replace nuxtjs/auth.

I use @nuxt/auth-next

[davydnorris]

OK well that's got me stumped!

Do you have any errors in your browser console? Open it up and go through the entire login process and see if you get any errors, in particular the POST request after returning the auth

[Icon003]

OK well that's got me stumped!

Do you have any errors in your browser console? Open it up and go through the entire login process and see if you get any errors, in particular the POST request after returning the auth

I was also puzzled by this behavior. There are no errors, the token request is not even sent

[davydnorris]

OK that's very strange - my suggestion is to use the demo application in this repo and add your strategy and an extra button to login. That's how I got my IBM AppID set up and testing.

The demo includes a sample OAuth2 server as well but it uses implicit workflow - but it should at least give you something to chase down

You've added the Auth middleware to your callback page, haven't you?

[Icon003]

OK that's very strange - my suggestion is to use the demo application in this repo and add your strategy and an extra button to login. That's how I got my IBM AppID set up and testing.

The demo includes a sample OAuth2 server as well but it uses implicit workflow - but it should at least give you something to chase down

You've added the Auth middleware to your callback page, haven't you?

Yes I use middleware

[Icon003]

OK that's very strange - my suggestion is to use the demo application in this repo and add your strategy and an extra button to login. That's how I got my IBM AppID set up and testing.

The demo includes a sample OAuth2 server as well but it uses implicit workflow - but it should at least give you something to chase down

You've added the Auth middleware to your callback page, haven't you?

And where can I clone a project with a demo

[davydnorris]

This repo - look in the demo directory

[JoaoPedroAS51]

Hi @Icon003! Sorry for the delay. Do you still facing this issue?

[tiretdusix]

Hello.

I think i'm facing the same issue.
Using nuxtjs/auth-next (v5) for PCKE support.

Below are my current configuration :

{
  resetOnError: true,
  localStorage: false,
  redirect: {
    login: "login",
    logout: "logout",
    callback: "/auth/",  // <== trying to land here
    home: "index"
  },
  cookie: { options: { sameSite: 'Lax' } },
  strategies: {
    my_super_oauth: {
      scheme: 'oauth2',
      endpoints: {
        authorization: "https://my-oauth-server.com/oauth2/authorize",
        token: "https://my-oauth-server.com/oauth2/token",
        userInfo: "",
        logout: ""
      },
      token: { property: 'access_token', type: 'Bearer', maxAge: 1800 },
      refreshToken: { property: 'refresh_token', maxAge: 2592000 },
      responseType: "code",
      grantType: 'authorization_code',
      accessType: 'offline',
      clientId: "my_client_id",
      codeChallengeMethod: 'S256',
      scope: ['private'],
    }
  }
}

What happen :

I start logging the user in like so :

this.$auth.loginWith('my_super_oauth')
        .then((response) => console.log(response))
        .catch((error) => console.log(error))

1. I'm getting redirected to my authentication route
2. I login,
3. I get the scope/permission grant prompt and click yes,
4. I get redirected to my callback /auth with a code and state query parameter like so :
   https://my-client.local:3000/auth/?code=1a3b4cbee...d1f9947&state=cD9eo4epv

Then nothing. it sits there..

⚠️ Important thing to notice. Maybe ?

I'm using Auth module alongside i18n and more :

[
  'nuxt-i18n',
  '@nuxtjs/auth-next',
  '@nuxtjs/axios',
  '@nuxt/content',
  '@nuxtjs/dayjs',
  '@nuxtjs/device'
]

Not sure how but i fear i18n could interfere with any route interceptor (route local prefix ?)

I can see i'm getting redirect from /auth to /en/auth so i disabled i18n entierly but still nothing happen.

Does anyone has Oauth with responseType: 'code' and grantType: 'authorization_code' working ?

[Icon003]

@JoaoPedroAS51 Hello, I have so far abandoned the idea of such authorization because of this problem, I think it is still relevant

[Icon003]

@tiretdusix I don't use i18n and I have the same problem, so I guess it's not about it

[davydnorris]

I have this problem with IBM's PKCE and it turns out its authorization_code implementation is broken.

Go through the sequence with your browser dev console open and have a look at what's being sent and received - that's how I found out it was IBM's implementation and not nuxt/auth. What I found was that it went through the same as you and nuxt/auth was then POSTing the code back as it is meant to, but the POST call was broken and was returning an error.

[tiretdusix]

Hello @davydnorris

Once i'm back on my callback URL with the code in query parameters, nothing happens.
I check the network dev tool and there is no emitted query to get the token at all.

[davydnorris]

That sounds like the middleware isn't catching the response - do you have it enabled on your pages?

[tiretdusix]

Hello.

Auth middleware is globally enable in nuxt configuration at :

{
  router: {
    middleware: ['auth']
  }
} 

I've been running the website using JWT locale strategy so far.

[Icon003]

I have all the same as at @tiretdusix, there is no request

[adam-nygate]

Also facing the same issue.

Something I've found (not sure if relevant), is that on working projects with @nuxtjs/auth-next, in the nuxt generated .nuxt directory, there's a auth/ directory which contains the generated logic for @nuxtjs/auth-next, whereas in my current project, this directory doesn't exist, but an auth.js does exist which references paths (e.g. ~auth/core/middleware) but I can't seem to understand what this is wanting to reference. Shouldn't this be files in node_modules/?

Side note: not sure if this makes a difference, but this new project has a src dir and so we're using nuxt's srcDir configuration with the nuxt.config.js file being at the root, and all other project files in src/. Wondering if this could be messing with the relative pathing?

Fixed mine by making sure you include @nuxtjs/axios before @nuxtjs/auth-next in my nuxt.config.js module section. I.e:

{
  ...
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
    // https://auth.nuxtjs.org/
    '@nuxtjs/auth-next'
  ],
  ...
}

[ETS-Nathaniel]

I fought with this same problem for a while, in the end for me what fixed it was missing the redirect object inside the auth.

auth:{
      redirect: {
        login: '/login',
        logout: '/login',
        home: '/',
        callback: '/api/authentication' <--- this was the important one
    },
    strategies: {
    /* Then the rest of your stuff */
    }
}

[KreskoLab]

@ETS-Nathaniel you save my day)
thx

[Singularity-2021]

Hello @davydnorris

Once i'm back on my callback URL with the code in query parameters, nothing happens.
I check the network dev tool and there is no emitted query to get the token at all.

Hi,
I'm having the same issue and was wondering if anyone came across a solution. Have tried some of the suggestions here but none have worked.

tried forcing it with this.$auth.strategy.token.get() but I get a CORS error.

Any help would be appreciated.

[davydnorris]

@Singularity-2021 - found there were two problems:

• IBM's AppID implementation for the default PKCE authorization_code workflow is broken and doesn't return a code. I have been fighting them for a year to get this fixed but they instead have supposedly implemented the draft PKCE web_message response mode

• Nuxt/Auth accepts response_mode=web_message and acknowledges it as an accepted response mode, but has no implementation for it

[wwform]

Just to add we never got this to work with [email protected] either, the redirect URL with code and state params just never calls the token URL (or any other). Of the above suggestions neither changing the order of module imports nor adding the redirects in the auth config helped.

[LangRizkie]

I'm facing the same problem with ^5.0.0-1643791578.532b3d6, using publicRuntimeConfig also doesn't help

[tai-tran-tan]

After days of searching and investigating I finally got it working. Here are my findings:

• I don't see the browser make any request to /userinfo path (probably due to SSR or it had been hidden somehow) but $auth.user is fetched and $auth.loggedIn is true. So no need to look for the request in network tab
• I don't set auth.redirect in nuxt.config.js, so everything is default as defined in https://auth.nuxtjs.org/api/options#redirect (you should make sure your pages and routes are matches these default config as well)
• It worked when I set redirectUri to 'http://localhost:3000/login' (protected by auth middleware by default)
• It did not worked when I set redirectUri to 'http://localhost:3000' because I intentionally disable auth middleware (auth: false) in index.vue page.

But you want to redirect to home page after login? => Yes, is still redirect to your home page after login because the default value of auth.redirect.home is '/'
I need you experts to be able to explain the behavior and suggest to change (if any). For now I hope my comment could help someone save their time. Cheers!

"@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc", "nuxt": "^2.15.8",

modules: [ 'primevue/nuxt', '@nuxtjs/axios', '@nuxtjs/auth-next', ],

[apowellnz]

I'm stuck with this as well. I have the exact same problem when it'll not handle the code challenge, and just hangs at that point.
I'm using auth0 strategy, and I have configured the PKCE based on the office documentation.
I have configured my nuxt.config.js like this:

// ~/nuxt.config.js
modules: [
  ['@nuxtjs/html-minifier', { log: 'once', logHtml: true }],
  [
    'nuxt-mq',
    {
      // Default breakpoint for SSR
      defaultBreakpoint: 'default',
      breakpoints: {
        xsDown: 599,
        xsUp: 600,
        smDown: 959,
        smUp: 960,
        mdDown: 1279,
        mdUp: 1280,
        lgDown: 1919,
        lgUp: 1920,
        xl: Infinity
      }
    }
  ],
  // ['nuxt-gmaps', { key: '' }],
  '@nuxtjs/i18n',
  '@nuxtjs/axios',
  '@nuxtjs/auth-next',
],
auth: {
  redirect: {
    login: '/sign-in',
    logout: '/sign-out',
    home: '/',
    callback: '/sign-in'
  },
  strategies: {
    auth0: {
      domain: process.env.auth0_domain,
      clientId: process.env.auth0_clientId,
      audience: process.env.auth0_audience,
      logoutRedirectUri: process.env.auth0_logoutRedirectUri,
      scope: ['openid', 'profile', 'email', 'offline_access'],
      responseType: 'code',
      grantType: 'authorization_code',
      codeChallengeMethod: 'S256',
      redirectUri: process.env.auth0_redirectUri
    }
  }
},

My sign in page is this:

// ~/pages/sign-in.vue
<template>
    <div class="main-wrap">
        <h1>Signing you in...</h1>
        <p>Please wait...</p>
        <a href="#" @click="signout()">Sign out</a>
    </div>
</template>

<style scoped lang="scss">
li {
    padding-top: 16px;
}
</style>

<script>
import brand from '~/static/text/brand'

export default {
    layout: 'single-page',
    // middleware: ['auth'],
    methods: {
        signout() {
            this.$auth.logout();
        }
    },
    head() {
        return {
            title: brand.medical.name + ' - Sign in'
        }
    }
}
</script>

I've attempted everything in this discussion, and had no change.
If I add the middleware to the page, predictably it'll just crash, as it's looping on itself.

So I'm almost to the point of rolling my own based off another plugin I created a while ago for quasar.
There definitely seems like something is missing in the documentation, since so many people keep having problems...

[apowellnz]

With some further playing around. I wrapped the auth call forcing it to run on the client side.

  if (process.client) {
      this.$auth.loginWith('openIDConnect')
  }

This forced the process to run on the client side. The code challenge must run on the client side otherwise it defeats the purpose of the challenge.
Once I done that I noticed it was attempting to navigate the chalenge to a page called 'null'.. This means the call back setting was playing up. So I just commented this out on the auth config, and it all started working as expected.

 ],
  auth: {
    redirect: {
      login: '/sign-in',
      logout: '/sign-out',
      // callback: '/sign-in',
      home: '/'
    },
    strategies: {
      openIDConnect : {
        scheme: 'openIDConnect',
        clientId: process.env.auth0_clientId,
        endpoints: { ...

Hope that helps. By forcing it to only run client side allowed all the errors to show up, and it was just a pragmatic approach from that point on...

Cheers