mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-12-29 20:12:28 +03:00
67 lines
2.8 KiB
Markdown
67 lines
2.8 KiB
Markdown
---
|
|
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 />!
|