Vinny (@Wasp) Comments - Answer Overflow

Topics

Vinny (@Wasp)

Explore posts from servers

WWasp TTCTheo's Typesafe Cult

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

yeah thats what I did manually in the example repo above. it would be cool to be able to save a property straight to the user entity, but if not, then a related entity with the oauth uniqueRequestId did the trick. I was able to relate the two entities in the onAfterSignup hook using that ID.

22 replies

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

FYI @miho -- trying to add signup field customization for both email & password and google auth methods is a pain. For email and password I could have just used a custom signup field in defineUserSignupFields and customized the signupForm But with google auth, I had to use the beforeOauthRedirect hook, create a new userType record, then use the onAfterSignup hook to assign that userType to the newly created user. It would be cool if we could just pass in one property to the SignupForm and have that property be passed to ALL auth methods, e.g.

export const SignupPage = () => {
  return (
    <SignupForm
      additionalFields={[
        {
          name: 'userType',
          label: 'User Type',
          type: 'input',
        },
    />
//...

export const getUsernameUserFields = defineUserSignupFields({
  userType: (data) => data.userType,
});

export const getGoogleUserFields = defineUserSignupFields({
  userType: (data) => data.userType,
  email: (data) => {
    const googleData = googleDataSchema.parse(data);
    return googleData.profile.email;
  },

export const SignupPage = () => {
  return (
    <SignupForm
      additionalFields={[
        {
          name: 'userType',
          label: 'User Type',
          type: 'input',
        },
    />
//...

export const getUsernameUserFields = defineUserSignupFields({
  userType: (data) => data.userType,
});

export const getGoogleUserFields = defineUserSignupFields({
  userType: (data) => data.userType,
  email: (data) => {
    const googleData = googleDataSchema.parse(data);
    return googleData.profile.email;
  },

22 replies

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

there are a lot of ways you could get around this. For example, it's most likely that users will be of "fan" userType so you could just default it to that, and put something in account settings that allows them to change their userType to creator. So its only creators that need to do the extra step. or, don't use social auth and only use email & password and just use a custom signup field, which is a lot easier than creating all these custom sign up actions and hooks: https://wasp-lang.dev/docs/auth/overview#signup-fields-customization

22 replies

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

here is an example. It's quite a lot of work to get it set up using both email and google becasue you have to customize both processes. Honestly, I would go with option 1. above because it could save you a lot of headached in the future, but here is option 2. anyway: https://github.com/vincanger/custom-auth-open-saas/tree/master/src/auth You'll notice: - a custom signup action - custom signup form (for email and password login) - a custom google signup button These custom components will assign the userType you set in your url query param http://localhost:3000/signup?userType=creator or it defaults to userType=fan You still have to: - implement the email verification step in customSignup.ts - fix the signup page styles - redirect the users to the proper dashboards based on user.userType.type (you might have to create a custom query to get this type -- see schema.prisma)

22 replies

•Created by Briston on 12/15/2024 in #🙋questions

Google analytics is not getting installed in my index.html after using npm run build?

Make sure to replace the G-1234567890 with your actual analytics number

35 replies

•Created by Briston on 12/15/2024 in #🙋questions

Google analytics is not getting installed in my index.html after using npm run build?

@Briston it looks like kapa is confusing Astro with Wasp. In Open SaaS, it gives an example of how you can use google analytics scripts via a cookie consent banner (e.g. if they click accept, it loads the script, if they decline, it doesn't load it). Here is the example in the Open SaaS template, as well as a guide from the docs t: Cookie Consent. Or you can add the script directly to head like this:

  head: [
        "<meta property=\"og:type\" content=\"website\" />",
// ...
        "<!-- Google tag (gtag.js) --><script async src=\"https://www.googletagmanager.com/gtag/js?id=G-123456890\"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-1234567890');</script>"
  ],

  head: [
        "<meta property=\"og:type\" content=\"website\" />",
// ...
        "<!-- Google tag (gtag.js) --><script async src=\"https://www.googletagmanager.com/gtag/js?id=G-123456890\"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-1234567890');</script>"
  ],

35 replies

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

Any luck?

22 replies

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

2. You create two urls, one for the creators and one for the fans, e.g. - https://yourapp.com/login?isCreator=1 for creators - https://yourapp.com/login?isCreator=0 for fans Then in your SignupPage, you do the following:

import { SignupForm, googleSignInUrl } from 'wasp/client/auth'; // Import the googleSignInUrl
import { AuthPageLayout } from './AuthPageLayout';
import { useSearchParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

type UserType = 'creator' | 'fan';

export function Signup() {
  const [searchParams] = useSearchParams();
  const [userType, setUserType] = useState<UserType>();

  useEffect(() => {
    const userTypeParam = searchParams.get('userType');
    if (userTypeParam === 'creator' || userTypeParam === 'fan') {
      setUserType(userTypeParam);
    } else {
      setUserType('fan');
    }
  }, [searchParams]);

  return (
    <AuthPageLayout>
      <a href={googleSignInUrl.concat(`?userType=${userType}`)}>
        <button>Google Login</button>
      </a>
      //..

import { SignupForm, googleSignInUrl } from 'wasp/client/auth'; // Import the googleSignInUrl
import { AuthPageLayout } from './AuthPageLayout';
import { useSearchParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

type UserType = 'creator' | 'fan';

export function Signup() {
  const [searchParams] = useSearchParams();
  const [userType, setUserType] = useState<UserType>();

  useEffect(() => {
    const userTypeParam = searchParams.get('userType');
    if (userTypeParam === 'creator' || userTypeParam === 'fan') {
      setUserType(userTypeParam);
    } else {
      setUserType('fan');
    }
  }, [searchParams]);

  return (
    <AuthPageLayout>
      <a href={googleSignInUrl.concat(`?userType=${userType}`)}>
        <button>Google Login</button>
      </a>
      //..

Then you use the Auth Hooks to deal with it: https://wasp-lang.dev/docs/auth/auth-hooks I can help you out more with this later if you're interested

22 replies

•Created by Vinny (@Wasp) on 12/11/2024 in #🙋questions

Creating two log in flows for Creators and Fans

ok @santi_matero the bot gave an ok suggestion but I see it didn't get everything right. Here are some options for you to consider: 1. Add some extra properties to the User:

model User {
  id                        String          @id @default(uuid())
  createdAt                 DateTime        @default(now())
  email                     String?         @unique
  username                  String?         @unique
  userType                  String          @default('fan') // 'creator' | 'fan'
  isSignupComplete          Boolean         @default(false)

model User {
  id                        String          @id @default(uuid())
  createdAt                 DateTime        @default(now())
  email                     String?         @unique
  username                  String?         @unique
  userType                  String          @default('fan') // 'creator' | 'fan'
  isSignupComplete          Boolean         @default(false)

After they go through the sign up process, isSignupComplete will be false. Check for that on the homepage and redirect them to a CompleteSignupPage with a form that allows the choose if they want to continue as a "creator" or "fan".

import { useAuth } from 'wasp/client/auth'
import { Redirect } from 'react-router-dom'

export function HomePage() {
  const { data: user } = useAuth()

  if (user.userType === 'creator') {
    return <Redirect to="/creator-dashboard" />
  } else if (user.userType === 'fan') {
    return <Redirect to="/fan-dashboard" />
  }

  // ... rest of the component
}

import { useAuth } from 'wasp/client/auth'
import { Redirect } from 'react-router-dom'

export function HomePage() {
  const { data: user } = useAuth()

  if (user.userType === 'creator') {
    return <Redirect to="/creator-dashboard" />
  } else if (user.userType === 'fan') {
    return <Redirect to="/fan-dashboard" />
  }

  // ... rest of the component
}

from there on, you redirect users to either the creator or fan dashboard pages

22 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

I have no experience deploying to a VPS but it definitely sounds like something is going wrong in your Build process. @miho is the most experienced with deploying to VPS, so I'll let him take over from here.

81 replies

•Created by Obaydah on 12/9/2024 in #🙋questions

Error when running migrate-dev

yep, I just pushed the updated changes to the remote repo so you can 1. ammemd your package.json to include the explicit react-dom and react-router-dom versions:

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2",

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2",

or 2. you can just pull a fresh saas template if you haven't starte coding (much) yet: wasp new -t saas

20 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

I did have to update my package.json to include react-dom and react-router-dom explicit versions, but I don't think this is the issue affecting you:

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2",

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.2",

81 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

https://lemon-squeezy-test-client.fly.dev/

81 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

no issues deploying lemon squeezy test keys and checking out after deploying to fly.io (cc: @martinsos @miho )

81 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

No description

81 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

Haha. Ok tomorrow I’m gonna try out deploying the app with lemon squeezy test keys and see if I run into similar issues @martinsos

81 replies

•Created by Lucas on 12/6/2024 in #🙋questions

Allow Guest Subscription Before Account Registration in OpenSaaS

Ohh this is a great idea, miho. Check it out @Lucas 👆

18 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

But seems odd that you're having this issue. Could it be something to do with node versions or something on your server. @martinsos might know more than me on this topic.

81 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

But I don't know, to be honest. With Stripe you can deploy an app with test keys

81 replies

•Created by Killshot on 12/9/2024 in #🙋questions

LemonSqueezy webhooks not working after deployment (VPS)

That sounds possible!

81 replies