Skip to main content
Version: 0.24

Overview

Wasp supports username & password authentication out of the box with login and signup flows. It provides you with the server-side implementation and the UI components for the client side.

Setting Up Username & Password Authentication​

To set up username authentication we need to:

  1. Enable username authentication in the Wasp file
  2. Add the User entity
  3. Add the auth routes and pages
  4. Use Auth UI components in our pages

Structure of the main.wasp.ts file we will end up with:

main.wasp.ts
import { app, page, route } from "@wasp.sh/spec"
import { SignupPage } from "./src/pages/auth" with { type: "ref" }

// Configuring e-mail authentication
export default app({
  name: "myApp",
  wasp: { version: "^0.24" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    // ...
  },
  spec: [
    // Defining routes and pages
    route("SignupRoute", "/signup", page(SignupPage)),
    // ...
  ],
})

1. Enable Username Authentication​

Let's start with adding the following to our main.wasp.ts file:

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

export default app({
  name: "myApp",
  wasp: { version: "^0.24" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    // 1. Specify the user entity (we'll define it next)
    userEntity: "User",
    methods: {
      // 2. Enable username authentication
      usernameAndPassword: {},
    },
    onAuthFailedRedirectTo: "/login"
  },
  // ...
})

Read more about the usernameAndPassword auth method options in the UsernameAndPasswordConfig API Reference.

2. Add the User Entity​

The User entity can be as simple as including only the id field:

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

You can read more about how the User is connected to the rest of the auth system and how you can access the user data in the Accessing User Data section of the docs.

3. Add the Routes and Pages​

Next, we need to define the routes and pages for the authentication pages.

Add the following to the main.wasp.ts file:

main.wasp.ts
import { app, page, route } from "@wasp.sh/spec"
import { LoginPage, SignupPage } from "./src/pages/auth" with { type: "ref" }

export default app({
  // ...
  spec: [
    route("LoginRoute", "/login", page(LoginPage)),
    route("SignupRoute", "/signup", page(SignupPage)),
  ],
})

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

4. Create the Client Pages​

info

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

Let's create a auth.tsx file in the src/pages folder and add the following to it:

src/pages/auth.jsx
import { LoginForm, SignupForm } from "wasp/client/auth"
import { Link } from "react-router"

export function LoginPage() {
  return (
    <Layout>
      <LoginForm />
      <br />
      <span className="text-sm font-medium text-gray-900">
        Don't have an account yet? <Link to="/signup">go to signup</Link>.
      </span>
    </Layout>
  )
}

export function SignupPage() {
  return (
    <Layout>
      <SignupForm />
      <br />
      <span className="text-sm font-medium text-gray-900">
        I already have an account (<Link to="/login">go to login</Link>).
      </span>
    </Layout>
  )
}

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

We imported the generated Auth UI components and used them in our pages. Read more about the Auth UI components here.

Conclusion​

That's it! We have set up username authentication in our app. 🎉

Running wasp db migrate-dev and then wasp start should give you a working app with username authentication. If you want to put some of the pages behind authentication, read the auth overview docs.

Using multiple auth identities for a single user

Wasp currently doesn't support multiple auth identities for a single user. This means, for example, that a user can't have both an email-based auth identity and a Google-based auth identity. This is something we will add in the future with the introduction of the account merging feature.

Account merging means that multiple auth identities can be merged into a single user account. For example, a user's email and Google identity can be merged into a single user account. Then the user can log in with either their email or Google account and they will be logged into the same account.

Using Auth​

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

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

const usernameIdentity = user.identities.username

// Username that the user used to sign up, e.g. "fluffyllama"
usernameIdentity.id

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

API Reference​

API reference

Auth »

All the options for the auth field of the app spec, including userEntity.
API reference

UsernameAndPasswordConfig »

All the options for the usernameAndPassword auth method.

Read more about the userSignupFields function in the Auth Overview docs.