Wasp-lang•2mo ago

What's the best way to setup auth with third party that utilizes Google Auth?

I am creating an app that will use https://www.dynamic.xyz/features/embedded-wallets and I will use striclty the Google auth portion of this. What's the best way to wire up a third party that uses Google auth to the Google auth setup in main.wasp? I am using the OpenSaaS template, not sure if that helps.

7 Replies

kapa.ai•2mo ago

Hi @fs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set up Google Authentication in your Wasp application, you need to follow a series of steps: 1. Enable Google Authentication in the Wasp file: You need to configure the Auth object in your main.wasp file. Here's how it should look:

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 auth: {  
 // 1. Specify the User entity (we'll define it next)  
 userEntity: User,  
 methods: {  
 // 2. Enable Google Auth  
 google: {}  
 },  
 onAuthFailedRedirectTo: "/login"  
 },  
}

app myApp {  
 wasp: {  
 version: "^0.13.0"  
 },  
 title: "My App",  
 auth: {  
 // 1. Specify the User entity (we'll define it next)  
 userEntity: User,  
 methods: {  
 // 2. Enable Google Auth  
 google: {}  
 },  
 onAuthFailedRedirectTo: "/login"  
 },  
}

Source (https://wasp-lang.dev/docs/auth/social-auth/google#setting-up-google-auth) 2. Add the User Entity: Define the app.auth.userEntity entity in your main.wasp file:

// ...  
// 3. Define the User entity  
entity User {=psl  
 id Int @id @default(autoincrement())  
 // ...  
psl=}

// ...  
// 3. Define the User entity  
entity User {=psl  
 id Int @id @default(autoincrement())  
 // ...  
psl=}

Source (https://wasp-lang.dev/docs/auth/social-auth/google#setting-up-google-auth) 3. Create a Google OAuth App: You need to create a Google project and provide Wasp with your client key and secret. You can follow the detailed steps here (https://wasp-lang.dev/docs/auth/social-auth/google#3-creating-a-google-oauth-app). 4. Add Environment Variables: Add your Google client ID and secret to the .env.server file at the root of your project:

GOOGLE_CLIENT_ID=your-google-client-id  
GOOGLE_CLIENT_SECRET=your-google-client-secret

GOOGLE_CLIENT_ID=your-google-client-id  
GOOGLE_CLIENT_SECRET=your-google-client-secret

Source (https://wasp-lang.dev/docs/auth/social-auth/google#4-adding-environment-variables) 5. Add the Necessary Routes and Pages: Define the necessary authentication Routes and Pages in your main.wasp file:

// ...  
  
// 6. Define the routes  
route LoginRoute { path: "/login", to: LoginPage }  
page LoginPage {  
 component: import { Login } from "@src/pages/auth.jsx"  
}

// ...  
  
// 6. Define the routes  
route LoginRoute { path: "/login", to: LoginPage }  
page LoginPage {  
 component: import { Login } from "@src/pages/auth.jsx"  
}

Source (https://wasp-lang.dev/docs/auth/social-auth/google#5-adding-the-necessary-routes-and-pages) After these steps, running wasp db migrate-dev and wasp start should give you a working app with Google authentication. As for integrating with a third-party service like Dynamic that uses Google Auth, you would typically need to follow their specific integration instructions. However, since the authentication is handled by Google, the setup in your Wasp app should remain the same. Please note that the OpenSaaS template should not affect the Google Auth setup process. For more details, you can refer to the Wasp Google Auth documentation (https://wasp-lang.dev/docs/auth/social-auth/google). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @fs, 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•2mo ago

What's the best way to wire up a third party that uses Google auth to the Google auth setup in main.wasp?

Could you provide more details on what you mean by "third party that uses Google auth"? Users log in the third party service?

fsOP•2mo ago

Hey @miho , thanks for responding. here's the flow - user clicks login / sign up button - dynamic.xyz opens modal attached in image - user clicks the Continue with Google button - user gets authed by Google and redirected to my website the issue here is the Google Auth is handled by dynamic.xyz and not by wasplang, so the session is not set when the users signs up

fsOP•2mo ago

    <DynamicContextProvider
      settings={{
        environmentId: "",
        walletConnectors: [EthereumWalletConnectors],
        events: {
          onAuthSuccess: async ({ user, primaryWallet, isAuthenticated }) => {
              const authToken = getAuthToken();
             // how do we set the authToken to work with wasp's auth? 
          },
          onAuthFailure: (data) => {
            console.log("onAuthFailure", data);
          },
        },
      }}
    >
      {children}
    <CookieConsentBanner />
    </DynamicContextProvider>

    <DynamicContextProvider
      settings={{
        environmentId: "",
        walletConnectors: [EthereumWalletConnectors],
        events: {
          onAuthSuccess: async ({ user, primaryWallet, isAuthenticated }) => {
              const authToken = getAuthToken();
             // how do we set the authToken to work with wasp's auth? 
          },
          onAuthFailure: (data) => {
            console.log("onAuthFailure", data);
          },
        },
      }}
    >
      {children}
    <CookieConsentBanner />
    </DynamicContextProvider>

miho•2mo ago

It's not really recommended to use two auth systems at once, either you use dynamic.xyz or Wasp Auth. If you are not using Wasp Auth, I guess dybamic.xyz has some docs on how to integrate with Node.js and React apps? You need to auth token on the client and then you need a way to check that auth token on the server as well I guess. Probably by sending that token in each request and then checking it in Wasp Operations. Why not use only Wasp's Google Auth?

fsOP•2mo ago

Why not use only Wasp's Google Auth?

That would be ideal, but I need to generate a crypto wallet for the users, and Dyamic handles that for me

miho•2mo ago

Gotcha! 🙂 Is there a backend API maybe that allows you to do only that portion for the user on the server?

Gaming

Programming

What's the best way to setup auth with third party that utilizes Google Auth?