Wasp•5w ago

Google Auth Custom Fields (not available from Google)

Hi! I would like to require some extra fields for the user to fill in during the sign up process, even if they are using Google Auth. I've checked the Auth hooks, but as I'm assuming I'd need an extra page in the process, I'm not sure this is what I need. What would you suggest to achieve this? Thanks in advance!

3 Replies

kapa.ai•5w ago

Hi @Ramon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add extra fields for users to fill in during the sign-up process when using Google Auth in Wasp, you can use a combination of userSignupFields and customizing the SignupForm component. Here's how you can achieve this: 1. Define extra fields using userSignupFields: First, you need to define the extra fields in your main.wasp file and implement them in a separate JavaScript/TypeScript file. This tells Wasp how to handle these additional fields on the server side.

app myApp {
  // ...
  auth: {
    userEntity: User,
    methods: {
      google: {
        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

app myApp {
  // ...
  auth: {
    userEntity: User,
    methods: {
      google: {
        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

Then, in your src/auth/google.js (or .ts) file:

import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
  address: async (data) => {
    const address = data.address
    if (typeof address !== 'string') {
      throw new Error('Address is required')
    }
    if (address.length < 5) {
      throw new Error('Address must be at least 5 characters long')
    }
    return address
  },
  // Add other custom fields here
})

import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
  address: async (data) => {
    const address = data.address
    if (typeof address !== 'string') {
      throw new Error('Address is required')
    }
    if (address.length < 5) {
      throw new Error('Address must be at least 5 characters long')
    }
    return address
  },
  // Add other custom fields here
})

2. Customize the SignupForm component: You can customize the SignupForm component to include additional fields. This will add the extra fields to the sign-up form on the client side.

import {
  SignupForm,
  FormError,
  FormInput,
  FormItemGroup,
  FormLabel,
} from 'wasp/client/auth'

export const SignupPage = () => {
  return (
    <SignupForm
      additionalFields={[
        {
          name: 'address',
          label: 'Address',
          type: 'input',
          validations: {
            required: 'Address is required',
          },
        },
        // Add other custom fields here
      ]}
    />
  )
}

import {
  SignupForm,
  FormError,
  FormInput,
  FormItemGroup,
  FormLabel,
} from 'wasp/client/auth'

export const SignupPage = () => {
  return (
    <SignupForm
      additionalFields={[
        {
          name: 'address',
          label: 'Address',
          type: 'input',
          validations: {
            required: 'Address is required',
          },
        },
        // Add other custom fields here
      ]}
    />
  )
}

3. Handle the flow: When a user signs up with Google, they will first go through the Google authentication process. After that, if there are additional required fields that haven't been filled, Wasp will automatically redirect the user to the signup page where they can fill in these extra fields. This approach allows you to require extra fields even when using Google Auth, without needing to create an entirely separate page in the process. The SignupForm component will handle both initial sign-ups and the collection of additional information after Google Auth. For more detailed information, you can refer to these Wasp documentation pages: - Auth Overview - Customizing the Signup Process - Google Auth - API Reference - Auth Overview - SignupForm Customization This solution allows you to seamlessly integrate additional fields into the Google Auth sign-up process without needing to create a separate page or use complex hooks. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Ramon, 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?

miho•4w ago

I'd recommend going with a two step signup process e.g. having a isSignupComplete field based on which you redirect the user to some sort of /finish-signup page 🙂

RamonOP•4w ago

It worked, thank you so much for your support!

Gaming

Programming

Google Auth Custom Fields (not available from Google)

Did you find this page helpful?