> Fetch the complete documentation index at: https://wasp.sh/llms.txt
---

# Overview

Social login options (e.g., *Log in with Google*) are a great (maybe even the best) solution for handling user accounts. A famous old developer joke tells us *"The best auth system is the one you never have to make."*

Wasp wants to make adding social login options to your app as painless as possible.

Using different social providers gives users a chance to sign into your app via their existing accounts on other platforms (Google, GitHub, etc.).

This page goes through the common behaviors between all supported social login providers and shows you how to customize them. It also gives an overview of Wasp's UI helpers - the quickest possible way to get started with social auth.

## Available Providers

Wasp currently supports the following social login providers:

### [Google »](https://wasp.sh/docs/auth/social-auth/google)

[Users sign in with their Google account.](https://wasp.sh/docs/auth/social-auth/google)

### [Github »](https://wasp.sh/docs/auth/social-auth/github)

[Users sign in with their Github account.](https://wasp.sh/docs/auth/social-auth/github)

### [Keycloak »](https://wasp.sh/docs/auth/social-auth/keycloak)

[Users sign in with their Keycloak account.](https://wasp.sh/docs/auth/social-auth/keycloak)

### [Slack »](https://wasp.sh/docs/auth/social-auth/slack)

[Users sign in with their Slack account.](https://wasp.sh/docs/auth/social-auth/slack)

### [Discord »](https://wasp.sh/docs/auth/social-auth/discord)

[Users sign in with their Discord account.](https://wasp.sh/docs/auth/social-auth/discord)

### [Microsoft »](https://wasp.sh/docs/auth/social-auth/microsoft)

[Users sign in with their Microsoft account.](https://wasp.sh/docs/auth/social-auth/microsoft)

Click on each provider for more details.

## User Entity

Wasp requires you to declare a `userEntity` for all `auth` methods (social or otherwise). This field tells Wasp which Entity represents the user.

Here's what the full setup looks like:

```ts title="main.wasp.ts"
import { app } from "@wasp.sh/spec"

export default app({
  name: "myApp",
  wasp: { version: "^0.25" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    userEntity: "User",
    methods: {
      google: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
  // ...
})
```

```prisma title="schema.prisma"
model User {
  id Int @id @default(autoincrement())
}
```

## Default Behavior

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.

If you wish to store more information about the user, you can override the default behavior. You can do this by defining the `userSignupFields` and `configFn` fields in `main.wasp.ts` for each provider.

You can create custom signup setups, such as allowing users to define a custom username after they sign up with a social provider.

### Example: Allowing User to Set Their Username

If you want to modify the signup flow (e.g., let users choose their own usernames), you will need to go through three steps:

1. The first step is adding a `isSignupComplete` property to your `User` Entity. This field will signal whether the user has completed the signup process.
2. The second step is overriding the default signup behavior.
3. The third step is implementing the rest of your signup flow and redirecting users where appropriate.

Let's go through both steps in more detail.

#### 1. Adding the `isSignupComplete` Field to the `User` Entity

```prisma title="schema.prisma"
model User {
  id               Int     @id @default(autoincrement())
  username         String? @unique
  isSignupComplete Boolean @default(false)
}
```

#### 2. Overriding the Default Behavior

Declare an import under `auth.methods.google.userSignupFields` (the example assumes you're using Google):

```ts title="main.wasp.ts"
import { app } from "@wasp.sh/spec"
import { userSignupFields } from "./src/auth/google" with { type: "ref" }

export default app({
  name: "myApp",
  wasp: { version: "^0.25" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    userEntity: "User",
    methods: {
      google: {
        userSignupFields
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
  // ...
})
```

And implement the imported function:

```ts title="src/auth/google.ts"
import { defineUserSignupFields } from "wasp/server/auth";

export const userSignupFields = defineUserSignupFields({
  isSignupComplete: () => false,
});
```

Wasp automatically generates the `defineUserSignupFields` function to help you correctly type your `userSignupFields` object.

#### 3. Showing the Correct State on the Client

You can check the `isSignupComplete` flag on the `user` object. Authenticated pages come with the [`user` prop](https://wasp.sh/docs/auth/overview#getting-the-user-in-authenticated-routes) which gives you access to the current user. If the `user` prop is out of reach, fetch the current user with the [`useAuth()` hook](https://wasp.sh/docs/auth/overview#getting-the-user-in-non-authenticated-routes).

Depending on the flag's value, you can redirect users to the appropriate signup step.

For example:

1. When the user lands on the homepage, check the value of `user.isSignupComplete`.
2. If it's `false`, it means the user has started the signup process but hasn't yet chosen their username. Therefore, you can redirect them to `EditUserDetailsPage` where they can edit the `username` property.

```tsx title="src/HomePage.tsx"
import { Navigate } from "react-router";
import type { AuthUser } from "wasp/auth";

export function HomePage({ user }: { user: AuthUser }) {
  if (user.isSignupComplete === false) {
    return <Navigate to="/edit-user-details" />;
  }

  // ...
}
```

The same general principle applies to more complex signup procedures, just change the boolean `isSignupComplete` property to a property like `currentSignupStep` that can hold more values.

### Using the User's Provider Account Details

Account details are provider-specific. Each provider has their own rules for defining the `userSignupFields` and `configFn` fields:

### [Google »](https://wasp.sh/docs/auth/social-auth/google#overrides)

[Users sign in with their Google account.](https://wasp.sh/docs/auth/social-auth/google#overrides)

### [Github »](https://wasp.sh/docs/auth/social-auth/github#overrides)

[Users sign in with their Github account.](https://wasp.sh/docs/auth/social-auth/github#overrides)

### [Keycloak »](https://wasp.sh/docs/auth/social-auth/keycloak#overrides)

[Users sign in with their Keycloak account.](https://wasp.sh/docs/auth/social-auth/keycloak#overrides)

### [Slack »](https://wasp.sh/docs/auth/social-auth/slack#overrides)

[Users sign in with their Slack account.](https://wasp.sh/docs/auth/social-auth/slack#overrides)

### [Discord »](https://wasp.sh/docs/auth/social-auth/discord#overrides)

[Users sign in with their Discord account.](https://wasp.sh/docs/auth/social-auth/discord#overrides)

### [Microsoft »](https://wasp.sh/docs/auth/social-auth/microsoft#overrides)

[Users sign in with their Microsoft account.](https://wasp.sh/docs/auth/social-auth/microsoft#overrides)

Click on each provider for more details.

## API Reference

[API reference](https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/SocialAuthConfig)

### [SocialAuthConfig »](https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/SocialAuthConfig)

[All the options for the social auth methods.](https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/SocialAuthConfig)

For more information on the provider-specific behavior of the `userSignupFields` and `configFn` functions, check the provider-specific API References:

### [Google »](https://wasp.sh/docs/auth/social-auth/google#api-reference)

[Users sign in with their Google account.](https://wasp.sh/docs/auth/social-auth/google#api-reference)

### [Github »](https://wasp.sh/docs/auth/social-auth/github#api-reference)

[Users sign in with their Github account.](https://wasp.sh/docs/auth/social-auth/github#api-reference)

### [Keycloak »](https://wasp.sh/docs/auth/social-auth/keycloak#api-reference)

[Users sign in with their Keycloak account.](https://wasp.sh/docs/auth/social-auth/keycloak#api-reference)

### [Slack »](https://wasp.sh/docs/auth/social-auth/slack#api-reference)

[Users sign in with their Slack account.](https://wasp.sh/docs/auth/social-auth/slack#api-reference)

### [Discord »](https://wasp.sh/docs/auth/social-auth/discord#api-reference)

[Users sign in with their Discord account.](https://wasp.sh/docs/auth/social-auth/discord#api-reference)

### [Microsoft »](https://wasp.sh/docs/auth/social-auth/microsoft#api-reference)

[Users sign in with their Microsoft account.](https://wasp.sh/docs/auth/social-auth/microsoft#api-reference)

Click on each provider for more details.