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!**
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!
