Skip to main content
Have a Wasp app in production? 🐝 We'll send you some swag! πŸ‘•
This is documentation for Wasp 0.14.0, which is no longer actively maintained.
For up-to-date documentation, see the latest version (0.20.0).
Version: 0.14.0

Google

Wasp supports Google Authentication out of the box. Google Auth is arguably the best external auth option, as most users on the web already have Google accounts.

Enabling it lets your users log in using their existing Google accounts, greatly simplifying the process and enhancing the user experience.

Let's walk through enabling Google authentication, explain some of the default settings, and show how to override them.

Setting up Google Auth​

Enabling Google Authentication comes down to a series of steps:

  1. Enabling Google authentication in the Wasp file.
  2. Adding the User entity.
  3. Creating a Google OAuth app.
  4. Adding the necessary Routes and Pages
  5. Using Auth UI components in our Pages.

Here's a skeleton of how our main.wasp should look like after we're done:

main.wasp
// Configuring the social authentication
appmyApp{
auth: { ... }
}

// Defining routes and pages
routeLoginRoute{ ... }
pageLoginPage{ ... }

1. Adding Google Auth to Your Wasp File​

Let's start by properly configuring the Auth object:

  • JavaScript
  • TypeScript
main.wasp
appmyApp{
wasp: {
version: "^0.14.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"
},
}

userEntity is explained in the social auth overview.

2. Adding the User Entity​

Let's now define the app.auth.userEntity entity in the schema.prisma file:

  • JavaScript
  • TypeScript
schema.prisma
// 3. Define the user entity
model User{
 id Int@id@default(autoincrement())
// Add your own fields below
// ...
}

3. Creating a Google OAuth App​

To use Google as an authentication method, you'll first need to create a Google project and provide Wasp with your client key and secret. Here's how you do it:

  1. Create a Google Cloud Platform account if you do not already have one: https://cloud.google.com/
  2. Create and configure a new Google project here: https://console.cloud.google.com/home/dashboard

[画像:Google Console Screenshot 1]

[画像:Google Console Screenshot 2]

  1. Search for OAuth in the top bar, click on OAuth consent screen.

[画像:Google Console Screenshot 3]

  1. Next, click Credentials.

[画像:Google Console Screenshot 10]

  1. Copy your Client ID and Client secret as you will need them in the next step.

4. Adding Environment Variables​

Add these environment variables to the .env.server file at the root of your project (take their values from the previous step):

.env.server
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

5. Adding the Necessary Routes and Pages​

Let's define the necessary authentication Routes and Pages.

Add the following code to your main.wasp file:

  • JavaScript
  • TypeScript
main.wasp
// ...

routeLoginRoute{path: "/login",to: LoginPage}
pageLoginPage{
component: import{Login}from"@src/pages/auth.jsx"
}

We'll define the React components for these pages in the src/pages/auth.tsx file below.

6. Create the Client Pages​

info

We are using Tailwind CSS to style the pages. Read more about how to add it here.

Let's now create a auth.tsx file in the src/pages. It should have the following code:

  • JavaScript
  • TypeScript
src/pages/auth.jsx
import{LoginForm}from'wasp/client/auth'

exportfunctionLogin(){
return(
<Layout>
<LoginForm/>
</Layout>
)
}

// A layout component to center the content
exportfunctionLayout({ children }){
return(
<divclassName="w-full h-full bg-white">
<divclassName="min-w-full min-h-[75vh] flex items-center justify-center">
<divclassName="w-full h-full max-w-sm p-5 bg-white">
<div>{children}</div>
</div>
</div>
</div>
)
}
Auth UI

Our pages use an automatically-generated Auth UI component. Read more about Auth UI components here.

Conclusion​

Yay, we've successfully set up Google Auth! πŸŽ‰

[画像:Google Auth]

Running wasp db migrate-dev and wasp start should now give you a working app with authentication. To see how to protect specific pages (i.e., hide them from non-authenticated users), read the docs on using auth.

Default Behaviour​

Add google: {} to the auth.methods dictionary to use it with default settings:

  • JavaScript
  • TypeScript
main.wasp
appmyApp{
wasp: {
version: "^0.14.0"
},
title: "My App",
auth: {
userEntity: User,
methods: {
google: {}
},
onAuthFailedRedirectTo: "/login"
},
}

When a user signs in for the first time, Wasp creates a new user account and links it to the chosen auth provider account for future logins.

Overrides​

By default, Wasp doesn't store any information it receives from the social login provider. It only stores the user's ID specific to the provider.

There are two mechanisms used for overriding the default behavior:

  • userSignupFields
  • configFn

Let's explore them in more detail.

Data Received From Google​

We are using Google's API and its /userinfo endpoint to fetch the user's data.

The data received from Google is an object which can contain the following fields:

[
"name",
"given_name",
"family_name",
"email",
"email_verified",
"aud",
"exp",
"iat",
"iss",
"locale",
"picture",
"sub"
]

The fields you receive depend on the scopes you request. The default scope is set to profile only. If you want to get the user's email, you need to specify the email scope in the configFn function.

For an up to date info about the data received from Google, please refer to the Google API documentation.

Using the Data Received From Google​

When a user logs in using a social login provider, the backend receives some data about the user. Wasp lets you access this data inside the userSignupFields getters.

For example, the User entity can include a displayName field which you can set based on the details received from the provider.

Wasp also lets you customize the configuration of the providers' settings using the configFn function.

Let's use this example to show both fields in action:

  • JavaScript
  • TypeScript
main.wasp
appmyApp{
wasp: {
version: "^0.14.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"
},
}
schema.prisma
model User{
 id Int@id@default(autoincrement())
 username String@unique
 displayName String
}

// ...
src/auth/google.js
exportconst userSignupFields ={
username:()=>"hardcoded-username",
displayName:(data)=> data.profile.name,
}

exportfunctiongetConfig(){
return{
scopes:['profile','email'],
}
}

Using Auth​

To read more about how to set up the logout button and get access to the logged-in user in both client and server code, read the docs on using auth.

When you receive the user object on the client or the server, you'll be able to access the user's Google ID like this:

const googleIdentity = user.identities.google

// Google User ID for example "123456789012345678901"
googleIdentity.id

Read more about accessing the user data in the Accessing User Data section of the docs.

API Reference​

Provider-specific behavior comes down to implementing two functions.

  • configFn
  • userSignupFields

The reference shows how to define both.

For behavior common to all providers, check the general API Reference.

  • JavaScript
  • TypeScript
main.wasp
appmyApp{
wasp: {
version: "^0.14.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"
},
}

The google dict has the following properties:

  • configFn: ExtImport​

    This function must return an object with the scopes for the OAuth provider.

    • JavaScript
    • TypeScript
    src/auth/google.js
    exportfunctiongetConfig(){
    return{
    scopes:['profile','email'],
    }
    }

  • userSignupFields: ExtImport​

    userSignupFields defines all the extra fields that need to be set on the User during the sign-up process. For example, if you have address and phone fields on your User entity, you can set them by defining the userSignupFields like this:

    • JavaScript
    • TypeScript
    src/auth.js
    import{ defineUserSignupFields }from'wasp/server/auth'

    exportconst userSignupFields =defineUserSignupFields({
    address:(data)=>{
    if(!data.address){
    thrownewError('Address is required')
    }
    return data.address
    }
    phone:(data)=> data.phone,
    })

    Read more about the userSignupFields function here.

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /