Auth-module: $auth.loginWith() not working

[yuruyuri16]

Version

v4.9.1

Reproduction link

https://codesandbox.io/s/nifty-shtern-4lbdo

Steps to reproduce

• Go to /login
• In console you will have the following warnings

./.nuxt/auth/schemes/oauth2.js 142:24-30
"export 'default' (imported as 'nanoid') was not found in 'nanoid'
./.nuxt/auth/schemes/oauth2.js 155:30-36
"export 'default' (imported as 'nanoid') was not found in 'nanoid'

• Click on login with google

• In console you will see the following errors

TypeError: Object(...) is not a function

What is expected ?

to go to the google login page

What is actually happening?

Nothing happens

Additional comments?

I am using typescript for this project
I added '@types/nuxtjs__auth' to my package.json

_{This bug report is available on Nuxt community (#c607)}

[heyshadowsmith]

I have encountered this as well, and I have found what I believe the issue is.

If you go to ./.nuxt/auth/schemes/oauth2.js and update this line...
import nanoid from 'nanoid' to this...
import { nanoid } from 'nanoid', it works.

But the second Nuxt's hot reload kicks in, it will revert it back to the broken state.

[heyshadowsmith]

@yuruyuri16 I found an interim fix that works until this is patched!

I fixed this issue by adding nanoid 2.1.11 as a direct dependency in my project by running...
npm i [email protected]

[Will-Burgon]

Thanks @heyshadowsmith, will try this later, been bugging me for the last few hours that I have to change the import of nanoid in the ./.nuxt/auth/schemes/oauth2.js file everytime the app rebuilds.

[ziadomar97]

Hi, have you solved the problem؟

[Soviut]

@Will-Burgon you should never touch any of the files in the .nuxt directory. They are the result of the webpack compilation.

Doing an npm install [email protected] worked for me.

[ZainW]

this issue still exists can confirm

doing npm install [email protected] worked for me as well

[maxall41]

I'm having the same issue. But installing [email protected] didn't work for me. I'm using oauth2 here's my config:

auth: {
    strategies: {
      auth0: {
        domain: 'secret',
        client_id: 'secret',
        audience: ''secret',
      },
    },
  },

error:

oauth2.js?3a82:92 Uncaught (in promise) TypeError: Object(...) is not a function
    at Oauth2Scheme.login (oauth2.js?3a82:92)
    at Auth.login (auth.js?facc:131)
    at eval (auth.js?facc:123)

[VictorioBerra]

doing npm install [email protected] worked for me as well.

When can this be fixed? This is a pretty crazy workaround.

[brendanmatkin]

Also confirming this is still an issue and forcing nanoid <3.0 works (npm install [email protected])

nuxt devs see nanoid 3.0 migration guide? Maybe this create-react-app pull request will help?

[davydnorris]

Just got bitten by this issue myself - trying to get IBM appID working. Will try the workaround

[sen2ran]

Same here

[PeteJStewart]

I also had this issue. I was using @nuxtjs/auth-next next, but that seemed to be broken as it wasn't seeing the client_id in the get request to Google, even though it was definitely set correctly.
I then decided to switch to @nuxtjs/auth, which is when I encountered this issue.

npm install [email protected] resolve the issue.

[sen2ran]

I also had this issue. I was using @nuxtjs/auth-next next, but that seemed to be broken as it wasn't seeing the client_id in the get request to Google, even though it was definitely set correctly.
I then decided to switch to @nuxtjs/auth, which is when I encountered this issue.

npm install [email protected] resolve the issue.

Thanks Man, It's working for me 👍

[bmulholland]

Fixed in https://github.com/nuxt-community/auth-module/pull/906

[gians96]

@ yuruyuri16 ¡Encontré una solución provisional que funciona hasta que se repare!

Solucioné este problema agregando nanoid 2.1.11 como una dependencia directa en mi proyecto ejecutando ...
npm i [email protected]

Excelente, 100% recomend