Wasp-lang•6mo ago

How do you get the user's email address when using Google login?

After upgrading to Wasp 0.13 it seems I can't get the User's email address anymore? The getEmail function returns null, as I'm using Google login ot authenticate the user. How can I get the user's email address when using social login?

5 Replies

kapa.ai•6mo ago

Hi @WWWillems. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the user's email address when using Google login with Wasp, you need to specify the email scope in the configFn function. By default, the scope is set to profile only, which does not include the user's email. Here is an example of how you can specify the email scope in the configFn function:

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

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

This function should be included in your Google auth configuration in your Wasp file:

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 auth: {  
 userEntity: User,  
 methods: {  
 google: {  
 configFn: import { getConfig } from "@src/auth/google.js",  
 userSignupFields: import { userSignupFields } from "@src/auth/google.js"  
 }  
 },  
 onAuthFailedRedirectTo: "/login"  
 },  
}

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 auth: {  
 userEntity: User,  
 methods: {  
 google: {  
 configFn: import { getConfig } from "@src/auth/google.js",  
 userSignupFields: import { userSignupFields } from "@src/auth/google.js"  
 }  
 },  
 onAuthFailedRedirectTo: "/login"  
 },  
}

After you have specified the email scope, you should be able to get the user's email using the getEmail helper function:

import { getEmail } from 'wasp/auth'  
  
const MainPage = ({ user }) => {  
 const email = getEmail(user)  
 // ...  
}

import { getEmail } from 'wasp/auth'  
  
const MainPage = ({ user }) => {  
 const email = getEmail(user)  
 // ...  
}

Please refer to the Wasp documentation (https://wasp-lang.dev/docs/auth/social-auth/google#overrides) for more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @WWWillems, 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?

WWWillemsOP•6mo ago

@kapa.ai I've specified the email scope and added the configFn to my main.wasp file. If i take a look at providerData in my AuthIdentity database entity, i'm seeing an empty object.

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're seeing an empty object in providerData in your AuthIdentity database entity, it might be because Wasp doesn't store any information it receives from the social login provider by default. It only stores the user's ID specific to the provider. To override this default behavior, you can use the userSignupFields function. This function allows you to specify which data received from the provider should be stored in the User entity upon signup. Here is an example of how you can define userSignupFields for Google auth:

export const userSignupFields = defineUserSignupFields({
  email: (data: any) => data.profile.emails[0].value,
  // ... other fields
});

export const userSignupFields = defineUserSignupFields({
  email: (data: any) => data.profile.emails[0].value,
  // ... other fields
});

This function should be included in your Google auth configuration in your Wasp file:

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 auth: {  
 userEntity: User,  
 methods: {  
 google: {  
 configFn: import { getConfig } from "@src/auth/google.js",  
 userSignupFields: import { userSignupFields } from "@src/auth/google.js"  
 }  
 },  
 onAuthFailedRedirectTo: "/login"  
 },  
}

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 auth: {  
 userEntity: User,  
 methods: {  
 google: {  
 configFn: import { getConfig } from "@src/auth/google.js",  
 userSignupFields: import { userSignupFields } from "@src/auth/google.js"  
 }  
 },  
 onAuthFailedRedirectTo: "/login"  
 },  
}

WWWillemsOP•6mo ago

Ok managed to fix it, my userSignupFields config in main.wasp was still pointing to the old implementation from Wasp 0.12 🤦‍♂️

martinsos•6mo ago

AH no worries, migrations are always tricky! Glad that you figured it out!

Gaming

Programming

How do you get the user's email address when using Google login?