Get Notified in Slack for Every New User Sign Up With Authgear
Tags: webdev, programming, slac, authentication
Published: 2023-08-19 15:52:47

User sign-ups are a crucial aspect of most web applications, and keeping track of them can provide valuable insights. Getting notified when a new user signs up is not just about knowing the numbers, but also about immediate user engagement. For example, you can send a welcome message or introduce them to special sign-up bonuses or offers as soon as they get authenticated in your system. When it comes to user authentication, [Authgear](https://www.authgear.com/) provides an extensive suite of authentication features. What if you want to receive immediate notifications in Slack when a new user signs up? 

There are many low-code tools to achieve this like [Zapier](https://zapier.com/) and [N8n](https://n8n.io/).  However, with Authgear you can integrate both authentication and sending messages. This article will guide you through the process of integrating Authgear's **Hooks and Events** with [Slack](https://slack.com/) to achieve just that.

## Why Authgear?

As **Authgear** is an identity-as-a-service (IDaaS) platform that supports various authentication methods like [social logins](https://www.authgear.com/features/social-login), [passwordless](https://www.authgear.com/features/passwordless-authentication), [biometrics logins](https://www.authgear.com/features/biometric-authentication), [one-time-password (OTP)](https://www.authgear.com/features/whatsapp-otp) with SMS/WhatsApp, and more.  It has built-in customizable login pages, you do not have to spend time designing UI and implementing complex authentication flows. It's designed to be developer-friendly and has [Hooks](https://docs.authgear.com/how-to-guide/events-hooks/denohooks) to react to different user-related events. Authgear offers an in-browser code editor where you can write **JavaScript/Typescript code** to add extra logic that is stored and runs on serverless infrastructure maintained by Authgear. We are going to use this capability to send Slack message after a new user sign up.

## Prerequisites

- **Authgear Account:** If you do not have one, you can sign up for a [free Authgear account](https://accounts.portal.authgear.com/signup?_ga=2.4973620.602174723.1690789558-1174359617.1686657394).
- **Configure an application in Authgear**. Any web-based, mobile, or desktop application will work. If you don't have any applications that use Authgear, you can create one by following the [Authgear Start Building](https://docs.authgear.com/get-started/start-building) page.
- **Slack account:** If don't have a Slack account, sign up for a new free one [here](https://slack.com/get-started) and go to the Slack [Get Started page](https://slack.com/get-started#/createnew).
- **Slack workspace:** You need access to a Slack workspace where you're an admin. If you are creating just a new workspace, follow [this guide](https://slack.com/help/articles/206845317-Create-a-Slack-workspace).

## Setting up the Slack Webhook

Before integrating Authgear, you'll need to create a webhook in Slack.

### Create a Slack Workspace

As you can see, I created a new workspace called `authgear-example-sign-up`:

![Create a Slack Workspace
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pir3aowmns73d09omklk.png)

Created a new Admin account there:

![Created a new Admin Slack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt0klcm4uji96dbt2o41.png)

Initiated a new Slack channel named `notification-sign-up`where we receive a notification when a user signs up:

![a new Slack channel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p85yespfmuapv3w3ja0w.png)

### Create a Slack App

Navigate to the [Slack API page](https://api.slack.com/apps), and create a new app **from scratch**. We use it to send the webhook information:

![Create a Slack App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8chkpbswyetlf4dr9u7.png)

In the next step, you provide the app name and select the workspace that you want to connect the app to. Make sure this is the correct app because you can't change the app's workspace later. After you pick a workspace, click **Create App**.

![Create App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrt3y8n6pkkg0gj1uak2.png)

### Enable Incoming Webhooks

Under the "Add features and functionality" section, click on "Incoming Webhooks" and activate them.

![Add features and functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4l99pwebp2tphtwdd6i.png)

Scroll down and click on "Add New Webhook to Workspace." Select the channel where notifications should be sent, and click "Allow.”

![Add New Webhook to Workspace Slack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xproxxabrypu53c7jx89.png)

Once created, you'll receive a Webhook URL containing a secret in a request param. **Copy this URL** as it will be used in the Authgear webhook code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k9pl29ukyeaus8ywckm.png)

## Integrating Authgear with Slack Webhook

With the Slack Webhook URL in hand, you can now set up the Authgear Hook to respond to the [user.created](https://docs.authgear.com/how-to-guide/events-hooks/event-list#user.created) event of [non-blocking](https://docs.authgear.com/how-to-guide/events-hooks#non-blocking-events) type.

### Writing a Hook Function

Navigate to **Advanced**->**Hooks** section in the [Authgear Portal](https://portal.authgear.com/). **Add** a new **Non-blocking** Event:

![Writing a Hook Function Authgear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6up96cgyjkzrr4oalvwt.png)

Choose the Hook **Type** as the *TypeScript.* You will write a function to respond to the user creation event and send a notification to Slack. Click on **Edit Script** under the **Config** option, it will bring you to the editor:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ueif81vm6jzf0rh5pz4.png)

We want to send a POST request to a Slack webhook URL when `EventUserCreated` is triggered:

```tsx
import { EventUserCreated } from "https://deno.land/x/authgear_deno_hook@v1.1.0/mod.ts";

export default async function(e: EventUserCreated): Promise<void> {
 
    const url = "YOUR_SLACK_WEBHOOK_URL";
    // Replace the text below with the actual message you want to send.
    const message = `New account signup: ${e.payload.identities[0].claims.email} has joined!`;
    const payload = {
      text: message,
    };
    const headers = {
      "Content-Type": "application/json",
    };
    // Send a POST request to the Slack webhook URL with the message.
    await fetch(url, {
      method: "POST",
      headers: headers,
      body: JSON.stringify(payload),
    });
      
}
```

This async TypeScript function will run after a user is registered. Replace `YOUR_SLACK_WEBHOOK_URL` with the URL copied earlier.  Once that is done, click on **Finish Editing** and **Save** the changes on the Hooks page.

### Validate the new hook

After everything is configured, we can test the newly created hook in action. The easiest way to test it is by creating a **new user** from the **User Management** page in [Authgear Portal](https://portal.authgear.com/) manually.  

![Validate the new hook Authgear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enyd7hd780mersg07x6h.png)

Upon the creation of a new user, you should see the new message is delivered with the user’s email address [example-user@authgear.com](mailto:example-user@authgear.com) to the Slack channel:

![creation of a new user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j62xzub3xhcm1z0mh8nb.png)

Another way to validate it is when a new user goes through the sign-up process after you integrated your system with Authgear App and configured the login method for your users. Or you could also use the **Try it now** option on the Authgear dashboard's **Getting Started** page.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xegnfkh6do6jbf3w5kn2.png)

After you sign up with an email, Slack message will be sent:

![Slack message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c42occpvnrxjvz26y512.png)

## Summary

Authgear's Hooks provides a customizable way to respond to user-related events. By integrating with Slack, you can receive real-time updates on user sign-ups directly in your preferred channel. Make sure to explore other [events](https://docs.authgear.com/how-to-guide/events-hooks/event-list) and tailor the integration to your specific needs!

### Related resources

[How Profile Enrichment can boost your product](https://www.authgear.com/post/how-profile-enrichment-can-boost-your-product)

### Community

🙋 [Join the Authgear Community on Discord](https://discord.gg/Kdn5vcYwAS)

🐦 [Follow on Twitter](https://twitter.com/authgear)

📝 [Ask questions](https://github.com/orgs/authgear/discussions/)

💁 [Check out open-source SDKs](https://github.com/authgear)

### About the author

Visit my blog: [www.iambobur.com](https://www.iambobur.com/)