## Slack login Adding Slack social login to your login page allows users to sign in to your website or application using their existing Slack account, making the login process faster and more convenient. To enable Slack social login, you will: - Enable Slack as a social login in the builder - Create a Slack App Follow the steps below for a smooth integration. ### Enabling slack login in builder 1. Open the **Frontegg portal**. 2. Click on the **Login Box** button. 3. In the left panel, toggle **Slack** to on. ![Slack-Login-1](/assets/slack-login-1.1533817b0bbc095316e2af93807eae846e2f4d73e5fb42ba8b6ab6c2901833a8.3a28ad27.png) 1. Click the **Review to Publish** button and **Publish to Dev**. You can have up to four social login options on your login page. ### Creating a slack app Complete the following steps to configure Slack login. ### Step 1: Open project 1. Go to the [Slack API](https://api.slack.com/), click on **Your Apps**, and then select **Create an App**. ![Slack-Login-2](/assets/slack-login-2.d3275ffa6502340b54e6c27da3e6778619da1fbd025032a84bee4a4e73bd54ce.3a28ad27.png) ### Step 2: Register your application 1. Click **Create New App** at the top of the page. ![Slack-Login-3](/assets/slack-login-3.be947dd86785fb004a11aaf54401811575570cadf95b5b5becf7570ac8a47eff.3a28ad27.png) 1. In the dialog that appears, choose **From Scratch**. ![Slack-Login-4](/assets/slack-login-4.f319d88a1e7c6cf768316a85592b6e7f09db779269f7f530d9faa3e3ca7d4f5d.3a28ad27.png) 1. Pick a name and a **Workspace** for your app, then click **Create App**. ![Slack-Login-5](/assets/slack-login-5.be6eb6e753e4589bd1f34c6572c4c86a821e0221adfe0ac7eb1eb100555c3cf0.3a28ad27.png) 1. To configure the app properly for social login, follow these steps: - In the left-side navigation, click on **OAuth & Permissions**. - Under **Redirect URLs**, add the redirect URL to which the user will be redirected upon successful login. - If you are using the Hosted login method, your Redirect URL should be: `https://[YOUR-FRONTEGG-DOMAIN].frontegg.com/oauth/account/social/success`. - If you are using the Embedded Login method, the Redirect URL should be: `https://[YOUR-APP-URL]/account/social/success`, for example: `http://localhost:3000/account/social/success`. - Click **Save URLs** to save the URL. ![Slack-Login-6](/assets/slack-login-6.9820c3eef19cf7d7ed7fa845b98dd1db06e427c1e0f90d62bb5d7d9efc4d12d7.3a28ad27.png) 1. Next, add scopes for retrieving user information from Slack: - Go to **Scopes** ➜ **User Token Scopes** and add the following scopes: - `email` - `profile` - `openid` ![Slack-Login-7](/assets/slack-login-7.60b72c45605d88ef61f347a5c7618254a011638a5db785ea469f6b40a219532f.3a28ad27.png) 1. Now, install the app to the Slack Workspace: - At the top of the **OAuth & Permissions** page, click **Install to Workspace**. ![Slack-Login-8](/assets/slack-login-8.4270423e6d7605daaa6d06ea4bb61e8582faf04f9d93610fa755b8f38035547d.3a28ad27.png) - When prompted, click **Allow** to grant your app the required permissions. 1. Under **Settings** ➜ **Manage Distribution**, scroll to the **Public Distribution** section: - Approve the removal of any hardcoded information under **Remove Hard Coded Information**. ![Slack-Login-9](/assets/slack-login-9.adcdfeae7fe9054b6bf662a895e9b297832243be9cc02bd94649de1db3354296.3a28ad27.png) - Click **Activate Public Distribution**. ### Step 3: Retrieve Slack credentials 1. Go to **Settings** ➜ **Basic Information** in your Slack app. 2. Under **App Credentials**, copy the **Client ID** and **Client Secret**. ![Slack-Login-10](/assets/slack-login-10.0cc3d2f10bb8fff3030c2917e539049a9e9e8d900623aadf8ce463e4b5101c09.3a28ad27.png) ### Step 4: Configure Slack in Frontegg 1. In the **Frontegg portal**, navigate to [ENVIRONMENT] → Configurations → Authentication → Social logins. 2. Click **Manage** on the Slack card. 3. Choose **Custom**, and enter the **Client ID** and **Client Secret** from your Slack app. ![Slack-Login-11](/assets/slack-login-11.7899fc72c2beba82ece50352e3f3beaea1c1cc6613612dab6ec700badc54bc8a.3a28ad27.png) 1. Save your changes. ### Step 5: Test Slack login integration 1. In your application, verify that the Slack login button appears. 2. Test logging in with Slack to confirm successful integration. Configuring Slack Login Permissions By default, only invited users can log in with Slack. To allow new users to sign up via Slack, enable **Allow Signup** in the Login Box builder's left panel. ## Customizing authentication scopes for Slack Scopes let you specify what information your application can access after users grant permission. By default, Frontegg retrieves user profile and email scopes. To add additional scopes: 1. In the **Frontegg portal**, navigate to [ENVIRONMENT] → Configurations ➜ Authentication → Social logins → Custom → Scopes. 2. For reference on supported scopes, see Slack's [supported scopes documentation](https://api.slack.com/scopes).