---
title: 'Wasp Auth UI: The first full-stack auth with self-updating forms!'
authors: [matijasos]
image: /img/auth-ui/auth-customize-code.png
tags: [webdev, wasp, startups, github]
---

import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';

import InBlogCta from './components/InBlogCta';
import WaspIntro from './_wasp-intro.md';
import ImgWithCaption from './components/ImgWithCaption';
import DiscordLink from './components/DiscordLink';


One of the main benefits of Wasp is having deep understanding of your entire full-stack app - e.g. what routes you have, what data models you defined, but also what methods you use for authentication. And that enables us to do some pretty cool stuff for you!

<ImgWithCaption
    caption="Customize auth forms to fit your brand!"
    alt="Auth UI Demo"
    source="img/auth-ui/auth-ui-demo.png"
/>

Once you've listed auth methods you want to use in your `.wasp` config file, you're done - from that Wasp generates a full authentication form that you simply import as a React component. **And the best part is that is updates dynamically as you add/remove auth providers!**

You can [see the docs and give it a try here](/docs/guides/auth-ui).

<!--truncate-->

## Auto-updating magic 🔮

<ImgWithCaption
    caption="Add GitHub as another auth provider -> the form updates automatically!"
    alt="Auth UI Demo gif"
    source="img/auth-ui/auth-demo-compiler.gif"
/>

:::tip

Since `.wasp` config file contains a high-level description of your app's requirements, Wasp can deduce **a lot** of stuff for you from it, and this is just a single example.

:::

When you update your `.wasp` file by adding/removing an auth method (GitHub in this case), Wasp will detect it and automatically regenerate the auth form. No need to configure anything else, or change your React code - just a single line change in `.wasp` file and everything else will get taken care of!

<ImgWithCaption
    caption="When you realize Wasp is a compiler and actually understands your app 🤯"
    alt="Mind exploding"
    source="img/auth-ui/mind-explosion.gif"
/>


## Customize it! 🎨

Although it looks nice, all of this wouldn't be really useful if you couldn't customize it to fit your brand. That's easily done through the component's props:

<ImgWithCaption
    caption="Easily customize your auth form through props!"
    alt="Customizing auth form through props"
    source="img/auth-ui/auth-customize-code.png"
/>

And that's it! You can see the whole list of tokens you can customize [here](https://github.com/wasp-lang/wasp/blob/main/waspc/data/Generator/templates/react-app/src/stitches.config.js). More are coming in the future!

Wasp out 🐝 🎤- [give it a try](/docs/guides/auth-ui) and let us know how you liked it in our <DiscordLink />!