blog: auth ui intro blog post

web/blog/2023-04-12-auth-ui.md

@@ -0,0 +1,63 @@
+---
+title: 'Wasp Auth UI: The simplest way to a full-stack auth!'
+authors: [matijasos]
+image: /img/auth-ui/auth-ui-demo.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'
+
+
+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!**
+
+<!--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 and let us know how you liked it in [our Discord](https://discord.gg/rzdnErX)!