Wasp Auth: New Authentication For Your React/Nextjs App ✨
Tags: webdev, react, nextjs, javascript
Published: 2023-10-27 15:56:49


![welcome guys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4rrsp5ivt62v4jqmoy3.gif)

Hey Guys, its me [Md Taqui Imam](https://bit.ly/mdTaquiImam). And Today, 

🎉 @wasplang  has launched their new Auth in product hunt!🎉  

Check out their  official [documentation](https://wasp-lang.dev/docs/auth/overview)🔥 And,

{% cta https://www.producthunt.com/posts/full-stack-auth-for-react-node-by-wasp %}Show Support in Producthunt 💖{% endcta %}

> Wasp Auth allow you to rock on a Full-stack auth for your React/Next.js app in no time, all based on a simple config!

## Let's see what's new ✨

Wasp recently released enhancements to its authentication system making it even more poweful and simpler to use for React developers. Let's take a look at what's new and how to leverage it.

## Key Features✨

The updated Wasp Auth system provides:

- **Built-in support for common auth flows** like email/password, social logins with Google/GitHub etc out of the box. No need to setup and configure third party libraries.

- **Protect routes automatically** by setting `authRequired: true`. Only logged in users can access these protected pages. 

- **Centralized user object** available everywhere for authentication check. Easy front-end conditional rendering based on auth status. 

- **Signup customization** allows adding extra fields to signup process and customizing signup form UI. 

- **Centralized state management** with React Context and Hooks. Removes need for external state management libraries.

- **Validation handling** for common cases but also support for custom validations.

## Integrating In A React App 🛠

Setting up authentication in a React app with Wasp is pretty straightforward:

### 1. Configure Auth Methods ⚙

In your `main.wasp` file, specify the user entity and enabled auth methods under the `auth` field. For example:

```
app MyApp {
  auth: {
    userEntity: User
    methods: {
      email: {},
      google: {} 
    }
  }
}
```

### 2. Protect Routes 🔐

Set `authRequired: true` for routes that need authentication. Wasp will redirect unauthorized users.

### 3. Access User Object

In React components, use the `useAuth()` hook or `user` prop (if passed from protected page) to conditionally show UI based on auth status. 

### 4. Build Auth Screens 💻

Use the generated Auth UI components like `SignupForm` or build custom screens leveraging the auth context/actions.

### 5. Customize As Needed 😊

Ensure your user entity matches requirements, add extra signup fields, customize validations etc. 

Wasp handles everything else!

## Pros ✔

- Simple integration. Covers common cases out of box.
- Centralizes auth state. Removes external dependencies. 
- Automatically protects routes and redirects users.
- Signup customization allows capturing additional user data.
- Uniform API surface across backend and frontend.

## Cons ❌

- Less configurable than standalone libraries. Some customization still needed. 
- Adds dependency on Wasp framework overall.

## In summary

Wasp Auth is a very developer friendly way to add full-featured authentication to React apps with minimal configuration needed. Great for basic to intermediate use cases.

Thankyou for reading this Article🤝, Don't forget to Drop 💖🔥🦄.

{% cta https://github.com/taqui-786 %}Follow me in Github✅{% endcta %}

## Happy Coding 👋