web/versioned_docs/version-0.11.8/auth/social-auth/google.md
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 UsernameGenerateExplanation from './_username-generate-explanation.md'; import GetUserFieldsType from './_getuserfields-type.md'; import ApiReferenceIntro from './_api-reference-intro.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.
Enabling Google Authentication comes down to a series of steps:
Let's start by properly configuring the Auth object:
<Tabs groupId="js-ts"> <TabItem value="js" label="JavaScript"> ```wasp title="main.wasp" app myApp { wasp: { version: "^0.11.0" }, title: "My App", auth: { // highlight-next-line // 1. Specify the User entity (we'll define it next) // highlight-next-line userEntity: User, // highlight-next-line // 2. Specify the SocialLogin entity (we'll define it next) // highlight-next-line externalAuthEntity: SocialLogin, methods: { // highlight-next-line // 3. Enable Google Auth // highlight-next-line google: {} }, onAuthFailedRedirectTo: "/login" }, } ``` </TabItem> <TabItem value="ts" label="TypeScript"> ```wasp title="main.wasp" app myApp { wasp: { version: "^0.11.0" }, title: "My App", auth: { // highlight-next-line // 1. Specify the User entity (we'll define it next) // highlight-next-line userEntity: User, // highlight-next-line // 2. Specify the SocialLogin entity (we'll define it next) // highlight-next-line externalAuthEntity: SocialLogin, methods: { // highlight-next-line // 3. Enable Google Auth // highlight-next-line google: {} }, onAuthFailedRedirectTo: "/login" }, } ``` </TabItem> </Tabs>externalAuthEntity and userEntity are explained in the social auth overview.
Let's now define the entities acting as app.auth.userEntity and app.auth.externalAuthEntity:
// highlight-next-line
// 5. Define the SocialLogin entity
// highlight-next-line
entity SocialLogin {=psl
id Int @id @default(autoincrement())
provider String
providerId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
userId Int
createdAt DateTime @default(now())
@@unique([provider, providerId, userId])
psl=}
```
// highlight-next-line
// 5. Define the SocialLogin entity
// highlight-next-line
entity SocialLogin {=psl
id Int @id @default(autoincrement())
provider String
providerId String
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
userId Int
createdAt DateTime @default(now())
@@unique([provider, providerId, userId])
psl=}
```
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:
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.
Select Create Credentials.
Select OAuth client ID.
Complete the form
Under Authorized redirect URIs, put in: http://localhost:3000/auth/login/google
https://someotherhost.com/auth/login/googleWhen you save, you can click the Edit icon and your credentials will be shown.
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
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 "@client/pages/auth.jsx"
}
```
// 6. Define the routes
route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
component: import { Login } from "@client/pages/auth.tsx"
}
```
We'll define the React components for these pages in the client/pages/auth.{jsx,tsx} file below.
:::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 client/pages.
It should have the following code:
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>
)
}
```
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. :::
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.
Add google: {} to the auth.methods dictionary to use it with default settings:
entity User {=psl
id Int @id @default(autoincrement())
username String @unique
displayName String
externalAuthAssociations SocialLogin[]
psl=}
// ...
```
```js title="src/server/auth/google.js"
import { generateAvailableDictionaryUsername } from '@wasp/core/auth.js'
export const getUserFields = async (_context, args) => {
const username = await generateAvailableDictionaryUsername()
const displayName = args.profile.displayName
return { username, displayName }
}
export function getConfig() {
return {
clientID, // look up from env or elsewhere
clientSecret, // look up from env or elsewhere
scope: ['profile', 'email'],
}
}
```
entity User {=psl
id Int @id @default(autoincrement())
username String @unique
displayName String
externalAuthAssociations SocialLogin[]
psl=}
// ...
```
```ts title="src/server/auth/google.ts"
import type { GetUserFieldsFn } from '@wasp/types'
import { generateAvailableDictionaryUsername } from '@wasp/core/auth.js'
export const getUserFields: GetUserFieldsFn = async (_context, args) => {
const username = await generateAvailableDictionaryUsername()
const displayName = args.profile.displayName
return { username, displayName }
}
export function getConfig() {
return {
clientID, // look up from env or elsewhere
clientSecret, // look up from env or elsewhere
scope: ['profile', 'email'],
}
}
```
<GetUserFieldsType />
The google dict has the following properties:
configFn: ServerImportThis function must return an object with the Client ID, the Client Secret, and the scope for the OAuth provider.
<Tabs groupId="js-ts"> <TabItem value="js" label="JavaScript"> ```js title="src/server/auth/google.js" export function getConfig() { return { clientID, // look up from env or elsewhere clientSecret, // look up from env or elsewhere scope: ['profile', 'email'], } } ``` </TabItem> <TabItem value="ts" label="TypeScript"> ```ts title="src/server/auth/google.ts" export function getConfig() { return { clientID, // look up from env or elsewhere clientSecret, // look up from env or elsewhere scope: ['profile', 'email'], } } ``` </TabItem> </Tabs>getUserFieldsFn: ServerImportThis function must return the user fields to use when creating a new user.
The context contains the User entity, and the args object contains Google profile information.
You can do whatever you want with this information (e.g., generate a username).
Here is how to generate a username based on the Google display name:
<Tabs groupId="js-ts"> <TabItem value="js" label="JavaScript"> ```js title="src/server/auth/google.js" import { generateAvailableUsername } from '@wasp/core/auth.js'export const getUserFields = async (_context, args) => {
const username = await generateAvailableUsername(
args.profile.displayName.split(' '),
{ separator: '.' }
)
return { username }
}
```
export const getUserFields: GetUserFieldsFn = async (_context, args) => {
const username = await generateAvailableUsername(
args.profile.displayName.split(' '),
{ separator: '.' }
)
return { username }
}
```
<GetUserFieldsType />