How to Pass Additional Parameters in SSO Login

import { defineUserSignupFields } from 'wasp/server/auth'  
  
export const userSignupFields = defineUserSignupFields({  
 address: (data) => {  
 if (!data.address) {  
 throw new Error('Address is required')  
 }  
 return data.address  
 }  
 phone: (data) => data.phone,  
})  

import { defineUserSignupFields } from 'wasp/server/auth'  
  
export const userSignupFields = defineUserSignupFields({  
 address: (data) => {  
 if (!data.address) {  
 throw new Error('Address is required')  
 }  
 return data.address  
 }  
 phone: (data) => data.phone,  
})  

import { SignupForm, FormItemGroup } from 'wasp/client/auth'  
  
export const SignupPage = () => {  
 return (  
 <SignupForm  
 additionalFields={(form, state) => {  
 const username = form.watch('username')  
 return (  
 username && (  
 <FormItemGroup>  
 Hello there <strong>{username}</strong> 👋  
 </FormItemGroup>  
 )  
 )  
 }}  
 />  
 )  
}  

import { SignupForm, FormItemGroup } from 'wasp/client/auth'  
  
export const SignupPage = () => {  
 return (  
 <SignupForm  
 additionalFields={(form, state) => {  
 const username = form.watch('username')  
 return (  
 username && (  
 <FormItemGroup>  
 Hello there <strong>{username}</strong> 👋  
 </FormItemGroup>  
 )  
 )  
 }}  
 />  
 )  
}  

import { useEffect, useState } from "react";
import { FormItemGroup, FormLabel, SignupForm } from "wasp/client/auth";

export function LoginPage() {
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  useEffect(() => {
    saveExtraUserInfo({ acceptedTerms });
  }, [acceptedTerms]);
  return (
    <div>
      <SignupForm />
      <FormItemGroup>
        <FormLabel>
          I accept the terms of service
          <input
            type="checkbox"
            checked={acceptedTerms}
            onChange={(e) => setAcceptedTerms(e.target.checked)}
          />
        </FormLabel>
      </FormItemGroup>
    </div>
  );
}

const extraDataKey = "user:extraInfo";

function saveExtraUserInfo(data: Record<string, unknown>) {
  localStorage.setItem(extraDataKey, JSON.stringify(data));
}

export function loadExtraUserInfo(): Record<string, unknown> | null {
  const data = localStorage.getItem(extraDataKey);
  try {
    const parsedData = data ? JSON.parse(data) : null;
    localStorage.removeItem("user:extraInfo");
    return parsedData;
  } catch (e) {
    console.error("Failed to parse extra info:", data);
    return null;
  }
}

import { useEffect, useState } from "react";
import { FormItemGroup, FormLabel, SignupForm } from "wasp/client/auth";

export function LoginPage() {
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  useEffect(() => {
    saveExtraUserInfo({ acceptedTerms });
  }, [acceptedTerms]);
  return (
    <div>
      <SignupForm />
      <FormItemGroup>
        <FormLabel>
          I accept the terms of service
          <input
            type="checkbox"
            checked={acceptedTerms}
            onChange={(e) => setAcceptedTerms(e.target.checked)}
          />
        </FormLabel>
      </FormItemGroup>
    </div>
  );
}

const extraDataKey = "user:extraInfo";

function saveExtraUserInfo(data: Record<string, unknown>) {
  localStorage.setItem(extraDataKey, JSON.stringify(data));
}

export function loadExtraUserInfo(): Record<string, unknown> | null {
  const data = localStorage.getItem(extraDataKey);
  try {
    const parsedData = data ? JSON.parse(data) : null;
    localStorage.removeItem("user:extraInfo");
    return parsedData;
  } catch (e) {
    console.error("Failed to parse extra info:", data);
    return null;
  }
}

import { useEffect } from "react";
import "./Main.css";
import { loadExtraUserInfo } from "./auth";

export const MainPage = ({ user }) => {
  useEffect(() => {
   const data = loadExtraUserInfo();
   if (data && data.acceptedTerms === true) {
     alert("You have accepted the terms and conditions");
   }
  }, []);
  return (
    <div className="container">
      <main>
        You are logged in. The user data we have is:
        <pre>{JSON.stringify(user, null, 2)}</pre>
      </main>
    </div>
  );
};

import { useEffect } from "react";
import "./Main.css";
import { loadExtraUserInfo } from "./auth";

export const MainPage = ({ user }) => {
  useEffect(() => {
   const data = loadExtraUserInfo();
   if (data && data.acceptedTerms === true) {
     alert("You have accepted the terms and conditions");
   }
  }, []);
  return (
    <div className="container">
      <main>
        You are logged in. The user data we have is:
        <pre>{JSON.stringify(user, null, 2)}</pre>
      </main>
    </div>
  );
};