Access is denied with Google Authentication using NextAuth.js

[shirotamaki]

Question 💬

Overview

Hi, I'm looking for a solution to a problem I'm having!

I am developing a web application using Next.js and Rails.
I have implemented a Google Authentication login function using NextAuth.js. The program is working fine in development mode, but when I run it in production mode after building it, an access denied error occurs and I am having trouble resolving it. I would appreciate any advice you can give me.

Versions

• Next.js: "13.2.4"
• next-auth: "4.20.1"
• Rails '7.0.4.2'

Repository

https://github.com/shirotamaki/outdoor-heart-sutra

What I want to achieve

I would like to implement Google Authentication Login in production mode as well, which has been realized in development mode.

How to reproduce

Development Mode

• Activate development mode with the npm run dev command.
• Execute Google Login.
• Authentication is successful, login is complete, and the page is redirected.

Production mode

• After npm run build, start production mode with npm run start command.

• When login is executed, it fails and an error screen is displayed.

  • 

• There is no problem except for the login function.

What I tried

I predicted. I confirmed that the problem occurred in the try...catch syntax in frontend/src/pages/api/auth/[....nextauth].ts.
I expected that the post was not executed and an error was thrown, but I was able to confirm that the POST was actually POSTed to the Rails API and the usersController#create action was executed.
User registration is also completed in the database.

Regarding GoogleCloudPlatform, the "approved redirect URI" is already registered. This time, since we are in production mode and not in a production environment, I am aware that the "approved redirect URI" will use the same URI as in development mode.

• Approved JavaScript generator: http://localhost:4000
• Approved redirect URI: http://localhost:4000/api/auth/callback/google

How to reproduce ☕️

Error log

サーバーからのレスポンスがありません: <ref *2> Writable {
  _writableState: WritableState {
    objectMode: false,
    highWaterMark: 16384,
    finalCalled: false,
    needDrain: false,
    ending: false,
    ended: false,
    finished: false,
    destroyed: false,
    decodeStrings: true,
    defaultEncoding: 'utf8',
    length: 0,
    writing: false,
    corked: 0,
    sync: true,
    bufferProcessing: false,
    onwrite: [Function: bound onwrite],
    writecb: null,
    writelen: 0,
    afterWriteTickInfo: null,
    buffered: [],
    bufferedIndex: 0,
    allBuffers: true,
    allNoop: true,
    pendingcb: 0,
    constructed: true,
    prefinished: false,
    errorEmitted: false,
    emitClose: true,
    autoDestroy: true,
    errored: null,
    closed: false,
    closeEmitted: false,
    [Symbol(kOnFinished)]: []
  },
  _events: [Object: null prototype] {
    response: [Function: handleResponse],
    error: [Function: handleRequestError],
    socket: [Function: handleRequestSocket]
  },
  _eventsCount: 3,
  _maxListeners: undefined,
  _options: {
    maxRedirects: 21,
    maxBodyLength: Infinity,
    protocol: 'http:',
    path: '/auth/google/callback',
    method: 'POST',
    headers: [Object: null prototype] {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
      'User-Agent': 'axios/1.3.5',
      'Content-Length': '114',
      'Accept-Encoding': 'gzip, compress, deflate, br'
    },
    agents: { http: undefined, https: undefined },
    auth: undefined,
    beforeRedirect: [Function: dispatchBeforeRedirect],
    beforeRedirects: { proxy: [Function: beforeRedirect] },
    hostname: 'localhost',
    port: '3000',
    agent: undefined,
    nativeProtocols: { 'http:': [Object], 'https:': [Object] },
    pathname: '/auth/google/callback'
  },
  _ended: false,
  _ending: true,
  _redirectCount: 0,
  _redirects: [],
  _requestBodyLength: 114,
  _requestBodyBuffers: [
    {
      data: <Buffer 7b 22 70 72 6f 76 69 64 65 72 22 3a 22 67 6f 6f 67 6c 65 22 2c 22 75 69 64 22 3a 22 31 30 39 37 30 34 39 32 31 38 38 31 38 38 37 32 36 31 32 35 33 22 ... 64 more bytes>,
      encoding: undefined
    }
  ],
  _onNativeResponse: [Function (anonymous)],
  _currentRequest: <ref *1> ClientRequest {
    _events: [Object: null prototype] {
      response: [Function],
      abort: [Function (anonymous)],
      aborted: [Function (anonymous)],
      connect: [Function (anonymous)],
      error: [Function (anonymous)],
      socket: [Function (anonymous)],
      timeout: [Function (anonymous)]
    },
    _eventsCount: 7,
    _maxListeners: undefined,
    outputData: [],
    outputSize: 0,
    writable: true,
    destroyed: false,
    _last: true,
    chunkedEncoding: false,
    shouldKeepAlive: false,
    maxRequestsOnConnectionReached: false,
    _defaultKeepAlive: true,
    useChunkedEncodingByDefault: true,
    sendDate: false,
    _removedConnection: false,
    _removedContLen: false,
    _removedTE: false,
    strictContentLength: false,
    _contentLength: '114',
    _hasBody: true,
    _trailer: '',
    finished: false,
    _headerSent: true,
    _closed: false,
    socket: Socket {
      connecting: false,
      _hadError: true,
      _parent: null,
      _host: 'localhost',
      _closeAfterHandlingError: false,
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 8,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: [Array],
      _pendingEncoding: '',
      server: null,
      _server: null,
      parser: null,
      _httpMessage: [Circular *1],
      [Symbol(async_id_symbol)]: 1951,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kSetNoDelay)]: true,
      [Symbol(kSetKeepAlive)]: true,
      [Symbol(kSetKeepAliveInitialDelay)]: 60,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0
    },
    _header: 'POST /auth/google/callback HTTP/1.1\r\n' +
      'Accept: application/json, text/plain, */*\r\n' +
      'Content-Type: application/json\r\n' +
      'User-Agent: axios/1.3.5\r\n' +
      'Content-Length: 114\r\n' +
      'Accept-Encoding: gzip, compress, deflate, br\r\n' +
      'Host: localhost:3000\r\n' +
      'Connection: close\r\n' +
      '\r\n',
    _keepAliveTimeout: 0,
    _onPendingData: [Function: nop],
    agent: Agent {
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      defaultPort: 80,
      protocol: 'http:',
      options: [Object: null prototype],
      requests: [Object: null prototype] {},
      sockets: [Object: null prototype],
      freeSockets: [Object: null prototype] {},
      keepAliveMsecs: 1000,
      keepAlive: false,
      maxSockets: Infinity,
      maxFreeSockets: 256,
      scheduling: 'lifo',
      maxTotalSockets: Infinity,
      totalSocketCount: 1,
      [Symbol(kCapture)]: false
    },
    socketPath: undefined,
    method: 'POST',
    maxHeaderSize: undefined,
    insecureHTTPParser: undefined,
    joinDuplicateHeaders: undefined,
    path: '/auth/google/callback',
    _ended: false,
    res: null,
    aborted: false,
    timeoutCb: null,
    upgradeOrConnect: false,
    parser: null,
    maxHeadersCount: null,
    reusedSocket: false,
    host: 'localhost',
    protocol: 'http:',
    _redirectable: [Circular *2],
    [Symbol(kCapture)]: false,
    [Symbol(kBytesWritten)]: 0,
    [Symbol(kEndCalled)]: false,
    [Symbol(kNeedDrain)]: false,
    [Symbol(corked)]: 0,
    [Symbol(kOutHeaders)]: [Object: null prototype] {
      accept: [Array],
      'content-type': [Array],
      'user-agent': [Array],
      'content-length': [Array],
      'accept-encoding': [Array],
      host: [Array]
    },
    [Symbol(errored)]: null,
    [Symbol(kUniqueHeaders)]: null
  },
  _currentUrl: 'http://localhost:3000/auth/google/callback',
  [Symbol(kCapture)]: false
}

The code that is causing the problem

// frontend/src/pages/api/auth/[...nextauth].ts

callbacks: {
    async signIn({ user, account, profile }) {
      if (!account) {
        return false
      }

      const provider = account.provider
      const uid = user.id
      const name = user.name
      const email = user.email

      try {
        const response = await axios.post(`${apiUrl}/auth/${provider}/callback`, {
          provider,
          uid,
          name,
          email,
        })

        if (response.status === 200) {
          return true
        } else {
          return false
        }
      } catch (error) {
        const axiosError = error as AxiosError
        if (axiosError.response) {
          // サーバーからのレスポンスが存在する場合
          console.error('サーバーからのレスポンス:', axiosError.response.data)
          console.error('ステータスコード:', axiosError.response.status)
          console.error('ヘッダー:', axiosError.response.headers)
        } else if (axiosError.request) {
          // リクエストが送信されたが、サーバーからのレスポンスがない場合
          console.error('サーバーからのレスポンスがありません:', axiosError.request)
        } else {
          // その他のエラー
          console.error('その他のエラーです:', axiosError.message)
        }
        return false
      }
    },
  },

Rails server log

Started POST "/auth/google/callback" for ::1 at 2023-04-09 21:47:51 +0900
Processing by Api::V1::UsersController#create as HTML
  Parameters: {"provider"=>"google", "uid"=>"109704921881887261253", "name"=>"ネクスト太郎", "email"=>"[email protected]", "user"=>{"provider"=>"google", "uid"=>"109704921881887261253", "name"=>"ネクスト太郎", "email"=>"[email protected]"}}
-----------------------------------api
  User Load (0.6ms)  SELECT "users".* FROM "users" WHERE "users"."provider" = $1 AND "users"."uid" = $2 AND "users"."name" = $3 AND "users"."email" = $4 LIMIT $5  [["provider", "google"], ["uid", "109704921881887261253"], ["name", "ネクスト太郎"], ["email", "[email protected]"], ["LIMIT", 1]]
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  TRANSACTION (0.2ms)  BEGIN
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  User Exists? (0.3ms)  SELECT 1 AS one FROM "users" WHERE "users"."uid" = $1 LIMIT $2  [["uid", "109704921881887261253"], ["LIMIT", 1]]
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  User Exists? (0.3ms)  SELECT 1 AS one FROM "users" WHERE "users"."email" = $1 LIMIT $2  [["email", "[email protected]"], ["LIMIT", 1]]
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  User Create (0.5ms)  INSERT INTO "users" ("provider", "uid", "created_at", "updated_at", "name", "email") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["provider", "google"], ["uid", "109704921881887261253"], ["created_at", "2023-04-09 12:47:51.222780"], ["updated_at", "2023-04-09 12:47:51.222780"], ["name", "ネクスト太郎"], ["email", "[email protected]"]]
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  TRANSACTION (2.4ms)  COMMIT
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  TRANSACTION (0.1ms)  BEGIN
  ↳ app/controllers/api/v1/users_controller.rb:14:in `create'
  User Exists? (0.3ms)  SELECT 1 AS one FROM "users" WHERE "users"."uid" = $1 AND "users"."id" != $2 LIMIT $3  [["uid", "109704921881887261253"], ["id", 65], ["LIMIT", 1]]
  ↳ app/controllers/api/v1/users_controller.rb:14:in `create'
  User Exists? (0.2ms)  SELECT 1 AS one FROM "users" WHERE "users"."email" = $1 AND "users"."id" != $2 LIMIT $3  [["email", "[email protected]"], ["id", 65], ["LIMIT", 1]]
  ↳ app/controllers/api/v1/users_controller.rb:14:in `create'
  TRANSACTION (0.1ms)  COMMIT
  ↳ app/controllers/api/v1/users_controller.rb:14:in `create'
Redirected to http://localhost:4000
Completed 302 Found in 27ms (ActiveRecord: 8.2ms | Allocations: 12025)

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[Crazypersonalph]

Is the callback route being protected and not allowed to be accessed without authentication?

[shirotamaki]

@Crazypersonalph Yes. It is set up so that it cannot be accessed without authentication.

[Crazypersonalph]

@Crazypersonalph Yes. It is set up so that it cannot be accessed without authentication.

That is the problem
You cannot really access the link that provides authentication if accessing it requires authentication.
(Just to get rid of a bit of confusion, what I am referring to as the callback link is the link which the authentication provider refers back to once it has verified the identity of a user.)

[shirotamaki]

@Crazypersonalph Thank you for your response.
I'm having some difficulty understanding your explanation. Could you please clarify your points or provide a more detailed explanation? If possible, examples or step-by-step instructions would be very helpful.
I appreciate your help and look forward to your further guidance.

[Crazypersonalph]

Considering that it is working in development, I do not believe that to be the issue
I'll take a look in your code and see what's up.

[Crazypersonalph]

@shirotamaki I found your issue

It is just that the Rails server is returning a 302 Found message instead of a 200 OK message, that is causing the access denied message.

[shirotamaki]

@Crazypersonalph
Thanks for checking issue.
I can check that the Rails server is returning a 302.

  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
Redirected to http://localhost:4000
Completed 302 Found in 10ms (ActiveRecord: 1.8ms | Allocations: 3715)

I changed it to return only status code 200 OK, without redirect.

# backend/app/controllers/api/v1/users_controller.rb

     def create
        next_url = Rails.application.credentials.next_url
        user = User.find_or_create_by(provider: params[:provider], uid: params[:uid], name: params[:name], email: params[:email])
        if user
          head :ok
        else
          render json: { error: 'ログインに失敗しました' }, status: :unprocessable_entity
        end

  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
  TRANSACTION (0.1ms)  COMMIT
  ↳ app/controllers/api/v1/users_controller.rb:13:in `create'
Completed 200 OK in 17ms (Views: 0.5ms | ActiveRecord: 4.1ms | Allocations: 8017)

Login succeeded !!

Thank you for your help.

[SaurabhHorizon]

did you find the issue? if yes please Explain it

[Crazypersonalph]

did you find the issue? if yes please Explain it

Their rails server was configured to return the wrong status code, causing the access denied message.

[hafsahussein]

I have the same problem, but I am using mongodb

[gauravdubey19]

same issue with me and im getting : GET http://localhost:3000/api/auth/error?error=AccessDenied 403 (Forbidden)
please let me know if we can reslove this frobidden....

[Thetwin21]

have you find a solution because i am getting the same error

[fromSian]

The error occurs when the signIn function returns false.