next.jsgoogle-oauthauth0google-contacts-api

Not sure where to request Google Contacts API scopes when using Auth0 + Next.js


I am trying to get my app verified by Google for both of Google Contacts readonly scopes so users can import their contacts into my app.

https://www.googleapis.com/auth/contacts.readonly
https://www.googleapis.com/auth/contacts.other.readonly

I am using Auth0 for handling users in my Next.js app. The package I am using is @auth0/nextjs-auth0. I have initialized auth0 as the documentation suggests.

// pages/api/auth/[...auth0].ts
import {handleAuth} from '@auth0/nextjs-auth0';


export default handleAuth();

In the Google Social connection in Auth0, I have checked the Contacts box and when I login with Google, I see the expected request to allow access to my contacts.

Using the googleapis package, I then call the google.people.connections.list method (which to my understanding is enabled by the contacts.readonly scope) with the Google user's access token and receive back a list of people from my main contacts list, NOT the "other" contacts list.

// This is the abstract Google API service config where the user's access token is set
export interface GoogleServiceConfig {
    accessToken: string
}

abstract class AbstractGoogleService {

    protected _config: GoogleServiceConfig

    constructor(config: GoogleServiceConfig) {
        this._config = config
    }
}

export default AbstractGoogleService
// This is the Google Contacts Helper service that extends the above Abstract Service
export default class GoogleContactsService extends AbstractGoogleService {
    // Search for contacts in user's google account and return them as options
    async search(options?: any) {
        const service = google.people({ version: 'v1', headers: {

            // the accessToken is the one fetched from the Google IDP profile provided by the Auth0 management API
            authorization: `Bearer ${this._config.accessToken}`
        }})
        
        return service.people.connections.list({
            resourceName: 'people/me',
            pageSize: 100,
            personFields: 'names,emailAddresses'
        })
    }
}

However, when I submitted my request for app scope verification to Google, they said I was only requesting the https://www.googleapis.com/auth/contacts.other.readonly scope and needed to revise either my scope verification request or my code.

I'm very confused as to where I'm supposed to request the two different Google Contact scopes as it seems that checking the Contacts box in the Auth0 Social Google configuration does request the contacts.readonly scope.

I tried putting the two Google Scopes in my handleAuth() call in [...auth0].ts as shown here https://github.com/auth0/nextjs-auth0/blob/main/EXAMPLES.md#access-an-external-api-from-an-api-route but received an error when logging in of...

access_denied (Service not found: https://www.googleapis.com/auth/contacts.readonly https://www.googleapis.com/auth/contacts.other.readonly)

This is my first time integrating with Auth0 and Google APIs so any help would be much appreciated as I am going in circles now and having troubling making heads or tails.

Thanks!


Solution

  • I was finally able to get approval from Google and wanted to share for the rest of the Googlers out there.

    To get approval when checking the Contacts box in Auth0:

    Contacts permissions checked in Auth0

    I needed to request this scope from Google:

    https://www.googleapis.com/auth/contacts
    

    This then let me get verified by Google and call the People API.