wasp/google.md at c17ca725dc120a3e0d806a8c55186245cee370bc

mirror of https://github.com/wasp-lang/wasp.git synced 2024-11-25 14:33:15 +03:00

Mihovil Ilakovac 8beec5928a Adds migration docs to 0.13 (#1890 )

2024-03-18 13:09:37 +01:00

13 KiB

Raw Blame History

title
Google

import useBaseUrl from '@docusaurus/useBaseUrl'; import DefaultBehaviour from './_default-behaviour.md'; import OverrideIntro from './_override-intro.md'; import OverrideExampleIntro from './_override-example-intro.md'; import UsingAuthNote from './_using-auth-note.md'; import WaspFileStructureNote from './_wasp-file-structure-note.md'; import GetUserFieldsType from './_getuserfields-type.md'; import ApiReferenceIntro from './_api-reference-intro.md'; import UserSignupFieldsExplainer from '../_user-signup-fields-explainer.md';

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:

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

1. Adding Google Auth to Your Wasp File

Let's start by properly configuring the Auth object:

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

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    // 1. Specify the User entity (we'll define it next)
    // highlight-next-line
    userEntity: User,
    methods: {
      // 2. Enable Google Auth
      // highlight-next-line
      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:

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

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

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:

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

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

Select what type of app you want, we will go with External.
Fill out applicable information on Page 1.
On Page 2, Scopes, you should select userinfo.profile. You can optionally search for other things, like email.
Add any test users you want on Page 3.

Next, click Credentials.

Select Create Credentials.
Select OAuth client ID.
Complete the form
Under Authorized redirect URIs, put in: http://localhost:3001/auth/google/callback
- Once you know on which URL(s) your API server will be deployed, also add those URL(s).
  - For example: https://your-server-url.com/auth/google/callback
When you save, you can click the Edit icon and your credentials will be shown.

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):

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:

// ...

// 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.tsx"
}

We'll define the React components for these pages in the src/pages/auth.{jsx,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.{jsx,tsx} file in the src/pages. It should have the following code:

import { LoginForm } from 'wasp/client/auth'

export function Login() {
  return (
    <Layout>
      <LoginForm />
    </Layout>
  )
}

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

import { LoginForm } from 'wasp/client/auth'

export function Login() {
  return (
    <Layout>
      <LoginForm />
    </Layout>
  )
}

// A layout component to center the content
export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  )
}

:::info 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! 🎉

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:

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      // highlight-next-line
      google: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
}

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      // highlight-next-line
      google: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
}

Overrides

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

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      google: {
        // highlight-next-line
        configFn: import { getConfig } from "@src/auth/google.js",
        // highlight-next-line
        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

entity User {=psl
    id                        Int     @id @default(autoincrement())
    username                  String  @unique
    displayName               String
psl=}

// ...

export const userSignupFields = {
  username: () => "hardcoded-username",
  displayName: (data) => data.profile.name,
}

export function getConfig() {
  return {
    scopes: ['profile', 'email'],
  }
}

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      google: {
        // highlight-next-line
        configFn: import { getConfig } from "@src/auth/google.js",
        // highlight-next-line
        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

entity User {=psl
    id                        Int     @id @default(autoincrement())
    username                  String  @unique
    displayName               String
psl=}

// ...

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

export const userSignupFields = defineUserSignupFields({
  username: () => "hardcoded-username",
  displayName: (data: any) => data.profile.name,
})

export function getConfig() {
  return {
    scopes: ['profile', 'email'],
  }
}

Using Auth

API Reference

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      google: {
        // highlight-next-line
        configFn: import { getConfig } from "@src/auth/google.js",
        // highlight-next-line
        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      google: {
        // highlight-next-line
        configFn: import { getConfig } from "@src/auth/google.js",
        // highlight-next-line
        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.

export function getConfig() {
  return {
    scopes: ['profile', 'email'],
  }
}

export function getConfig() {
  return {
    scopes: ['profile', 'email'],
  }
}

userSignupFields: ExtImport

Read more about the userSignupFields function here.

13 KiB Raw Blame History