Wasp•4w ago

Google OAuth : Missing required parameter: scope

Hi - I am working on a project locally and Google OAuth suddenly stopped working and shows an error saying “Access blocked: Authorization Error” and “Missing required parameter: scope” It worked fine yesterday and looking through the docs, it seems like the config in code and on GCloud are okay. I am using the saas template. Wasp version 0.16.2. The app starts fine without errors on wasp start, login with email & password is fine. Confirmed that the Client ID & secret are .env.server Snippet of main.wasp:

       google: { // Guide for setting up Auth via Google
        userSignupFields: import { getGoogleUserFields } from "@src/auth/userSignupFields",
        configFn: import { getGoogleAuthConfig } from "@src/auth/userSignupFields",
      },

       google: { // Guide for setting up Auth via Google
        userSignupFields: import { getGoogleUserFields } from "@src/auth/userSignupFields",
        configFn: import { getGoogleAuthConfig } from "@src/auth/userSignupFields",
      },

Snippet of userSignupFields.ts:

const googleDataSchema = z.object({
  profile: z.object({
    email: z.string(),
  }),
});

const googleDataSchema = z.object({
  profile: z.object({
    email: z.string(),
  }),
});

Redirect URL and scope setup in GCloud in screenshots. The email I'm logging in to is one of the test users.

15 Replies

kapa.ai•4w ago

Hi @Ringo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it seems that you're encountering an issue with Google OAuth in your Wasp project. Let's address this step by step: 1. The error "Missing required parameter: scope" suggests that there might be an issue with how the scopes are being set in your configuration. 2. You mentioned you're using the saas template, but it's important to note that this template might be outdated. According to the knowledge sources, it's recommended to use https://opensaas.sh instead Discord support thread. 3. The configFn in your main.wasp file is importing getGoogleAuthConfig from "@src/auth/userSignupFields". However, based on the current Wasp documentation, the configFn should return an object with the scopes. Here's how your getGoogleAuthConfig function should look like:

export function getGoogleAuthConfig() {
  return {
    scopes: ['profile', 'email'],
  }
}

export function getGoogleAuthConfig() {
  return {
    scopes: ['profile', 'email'],
  }
}

This is based on the example provided in the API Reference for Google Auth in Wasp. 4. Make sure your Google Cloud Console configuration matches the latest Wasp requirements. The authorized redirect URI should be <http://localhost:3001/auth/google/callback> for local development Setting up Google Auth. 5. Double-check that your .env.server file contains the correct GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET Adding Environment Variables. 6. If you've recently updated Wasp, make sure you've migrated your OAuth setup correctly. There were changes in how OAuth is configured in version 0.13.0 Migrate your OAuth setup. If after making these changes you're still encountering issues, you might want to compare your setup with the latest example in the OpenSaaS repository, as mentioned by Community Member 8 in a Discord thread Discord support thread. Remember, if you've made significant changes to your project, migrating to the latest template or carefully updating your configurations might be necessary to resolve this issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Ringo, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

RingoOP•4w ago

Yes, all of the above are confirmed, but the issue persists. I have also cleared my browser cache & cookies, and completely restart the browser, but it is still happening.

RingoOP•4w ago

Looking at the network request it doesn’t look like scope was included

miho•4w ago

How does your configFn look like?

RingoOP•4w ago

hi @miho , as in how it's defined in main.wasp? If so, i've included that in my original question: Snippet of main.wasp:

       google: { // Guide for setting up Auth via Google
        userSignupFields: import { getGoogleUserFields } from "@src/auth/userSignupFields",
        configFn: import { getGoogleAuthConfig } from "@src/auth/userSignupFields",
      },

       google: { // Guide for setting up Auth via Google
        userSignupFields: import { getGoogleUserFields } from "@src/auth/userSignupFields",
        configFn: import { getGoogleAuthConfig } from "@src/auth/userSignupFields",
      },

Snippet of userSignupFields.ts:

const googleDataSchema = z.object({
  profile: z.object({
    email: z.string(),
  }),
});

const googleDataSchema = z.object({
  profile: z.object({
    email: z.string(),
  }),
});

it should be just how it was from the original SaaS template

genyus•4w ago

No, he's asking you to share your configFn implementation, which in your case is the getGoogleAuthConfig function

RingoOP•4w ago

ah right that's my bad, i actually meant to show this below:

export function getGoogleAuthConfig() {
  return {
    scopes: ['profile', 'email'], // must include at least 'profile' for Google
  };
}

export function getGoogleAuthConfig() {
  return {
    scopes: ['profile', 'email'], // must include at least 'profile' for Google
  };
}

miho•4w ago

@Ringo it looks on the surface like it should be fine

miho•4w ago

Given that looks like it should be working and it isn't I'd suggest that you maybe try doing all the steps from scratch one more time. There must be some small thing missing since all the big things look in order to me 😄 Create a new blank Open Saas project, copy paste your auth code, create a new Google OAuth app and follow the docs closely and see what happens: https://wasp.sh/docs/auth/social-auth/google

Google | Wasp

Wasp supports Google Authentication out of the box.

RingoOP•3w ago

a web-dev newbie here, if i have already developed some features in my current project, what might be the best way to make sure i can retain the edited files when i start fresh?

MEE6•3w ago

Wohooo @Ringo, you just became a Waspeteer level 1!

RingoOP•3w ago

Hi @miho i noticed that despite both 'profile' and 'email' are included in my configFn as mentioned I have done some investigation with the help of Cursor, which has suggested some changes to app/.wasp/out/server/src/auth/providers/config/google.ts: 1. manually add back the missing scope parameter 2. change how access token is handled Change 2 was implemented because after Change 1, I was able to get into the email selection screen, but after choosing my test email (as configured in Google Cloud console, I got some server errors regarding missing tokens). After both of these are implemented, I was able to sign up and log in with Google OAuth! Of course the file will revert to what Wasp generates on wasp clean && wasp start, but if I manually update the file again, I can reliably resolve the issue. I have attached the updated code for easy reference. Would you mind taking a deeper look on your end? Thanks in advance!

google.ts

miho•3w ago

Hey @Ringo let me check out what you sent and report back 🙂

RingoOP•3w ago

Thanks!

miho•3w ago

@Ringo I've DM'd you

Gaming

Programming

Google OAuth : Missing required parameter: scope

Did you find this page helpful?