# Django+Next.js Google Authentication: Access Denied You do not have permission to sign in.

## Explanation
Failed to sign in with Google account as you do not have permission.

## Background
I was creating a blog site with Django+Next.js with Google Authentication watching an Tutorial video on Youtube.

After I coded [...nextauth].js, _app.js, and navigation.js files, I got the title's error.

The thing is that I developed with Next-auth v4 while the tutorial video used v3, so I had to modify some codes by referencing the official document.

## Source code

import NextAuth from "next-auth"
import axios from "axios"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
callbacks: {
    async signIn(user, account, profile) {
      if (account.provider === 'google') {
      
        const { accessToken, idToken } = account

        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          )

          const { access_token } = response.data
          user.accessToken = access_token

          return true
        } catch (error) {
          return false
        }
      }
      return false
    },
    async jwt(token, user, account, profile, isNewUser) {
      if (user) {
        const { accessToken } = user

        token.accessToken = accessToken
      }

      return token
    },
    async session(session, user) {
      session.accessToken = user.accessToken
      return session
    },
  }
}

export default (req, res) => NextAuth(req, res, settings)

## Error Analysis
### 1. Checking console log for both Django and Next.js server

Django server's log returned a 400 Bad Request messeage. This tells us that there is an error in request and the server can't process it.

#### See more in Mozilla, 400 Bad Request https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400


### For Next.js server
I added console.log within try-catch inside async signIn of callbacks.

async signIn(user, account, profile) {
      if (account.provider === 'google') {
        const { accessToken, idToken } = account
        console.log("\naccessToken"+accessToken + "\nidToken:"+idToken )

Thenthe it has returened.

accessToken:undefined
idToken:undefined

This means that the source code

 const { accessToken, idToken } = account
 #doesn't get information!

could not get successfully the Access Token and ID Token.

## [Still editing...]
Reviewing what are Callbacks.

"Callbacks are asynchronous functions you can use to control what happens when an action is performed. Callbacks are extremely powerful, especially in scenarios involving JSON Web Tokens" (NextAuth Documentation).

https://next-auth.js.org/configuration/callbacks

#### Part 3 Adding callbacks - 2

Let's review what are Callbacks.

"Callbacks are asynchronous functions you can use to control what happens when an action is performed. Callbacks are extremely powerful, especially in scenarios involving JSON Web Tokens" (NextAuth Documentation).

https://next-auth.js.org/configuration/callbacks

## References

https://cloud.google.com/apigee/docs/api-platform/reference/policies/oauth-http-status-code-reference?hl=ja

https://dmitripavlutin.com/access-object-properties-javascript/

## Tags

###### tags: `django` `next.js` `google authentication` `nextauth` `Django REST Framework`