Add Slack Sign-In to Your App

Enable "Sign in with Slack" for your application's users through OAuth42's social authentication feature.

What You'll Build

In this tutorial, you'll configure Slack as a social identity provider for your OAuth42 application. Your users will be able to click "Sign in with Slack" and authenticate using their Slack account.

How it works:

  • User clicks "Sign in with Slack" in your app
  • OAuth42 redirects to Slack for authentication
  • Slack authenticates the user and returns to OAuth42
  • OAuth42 creates/links the user account and issues tokens to your app
  • Your app receives the tokens and the user is logged in

Perfect for enterprise & B2B: Slack has over 20 million daily active users across businesses worldwide, making it an excellent authentication option especially for enterprise, B2B SaaS, and team collaboration applications.

Prerequisites

  • An OAuth42 account with an existing application
  • A Slack workspace with admin access to create apps
  • Your application already integrated with OAuth42 (see Getting Started with Hosted Auth)

Step 1: Create a Slack App

  1. Go to Slack API Apps and sign in
  2. Click Create New App
  3. Select From scratch
  4. Enter your app name and select the workspace
  5. Click Create App

Tip: Your Slack app name will be shown to users during the OAuth authorization screen, so choose something recognizable.

Step 2: Configure OAuth & Permissions

  1. In your app's settings, click OAuth & Permissions in the left sidebar
  2. Under Redirect URLs, click Add New Redirect URL
  3. Add the OAuth42 callback URLs:
    • Production: https://api.oauth42.com/api/social-auth/callback
    • Development: https://localhost:8443/api/social-auth/callback
  4. Click Save URLs

Required Scopes (OpenID Connect)

Scroll down to User Token Scopes and add the following OpenID Connect scopes:

  • openid - Required for OpenID Connect authentication
  • email - Access user's email address
  • profile - Access user's profile information (name, picture)

Note: These are the minimum scopes needed for "Sign in with Slack". Do not add other scopes unless your application specifically needs them.

Step 3: Get Application Credentials

  1. Go to Basic Information in the left sidebar
  2. Scroll down to App Credentials
  3. Copy your Client ID
  4. Copy your Client Secret (click "Show" to reveal it)

Keep your Client Secret safe! Never expose your Client Secret in client-side code or public repositories.

Step 4: Configure Slack in OAuth42 Portal

Now configure Slack as a social provider in your OAuth42 application:

  1. Log in to the OAuth42 Portal
  2. Navigate to Applications and select your application
  3. Click the Social Providers tab
  4. Click Add Provider
  5. Select Slack from the dropdown
  6. Enter the Client ID you copied from Slack
  7. Enter the Client Secret you copied from Slack
  8. Click Add Provider to save

Secure Storage: Your Slack Client Secret is automatically encrypted with AES-256 before being stored. It's never logged or exposed in plain text.

Step 5: Add Slack Sign-In Button to Your App

If you're using OAuth42's hosted auth pages, the Slack Sign-In button appears automatically when you enable the provider. No code changes needed!

For custom login pages, add a Slack Sign-In button that initiates the social auth flow:

"use client"

import { useState } from 'react'

export default function LoginPage() {
  const [isLoading, setIsLoading] = useState(false)

  const handleSlackSignIn = async () => {
    setIsLoading(true)

    // Call OAuth42's social auth init endpoint
    const response = await fetch('/api/auth/social/slack', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        provider: 'slack',
        client_id: process.env.NEXT_PUBLIC_OAUTH42_CLIENT_ID,
        is_signup: true, // Allow account creation
      }),
    })

    const data = await response.json()

    if (data.authorization_url) {
      // Redirect to Slack
      window.location.href = data.authorization_url
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="max-w-md w-full space-y-6 p-8 bg-white rounded-lg shadow">
        <h1 className="text-2xl font-bold text-center">Sign In</h1>

        <button
          onClick={handleSlackSignIn}
          disabled={isLoading}
          className="w-full flex items-center justify-center gap-3 py-3 px-4 bg-[#4A154B] text-white rounded-lg hover:bg-[#3D1140] transition-colors"
        >
          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/>
          </svg>
          {isLoading ? 'Redirecting...' : 'Sign in with Slack'}
        </button>
      </div>
    </div>
  )
}

Brand guidelines: Slack's brand color is Aubergine (#4A154B). Use "Sign in with Slack" as the button text. See Slack's Brand Guidelines for design requirements.

Step 6: Create API Route for Social Auth (Custom Login Only)

If using a custom login page, create an API route to initiate the social auth flow:

mkdir -p app/api/auth/social/slack
touch app/api/auth/social/slack/route.ts

Add the following code to app/api/auth/social/slack/route.ts:

import { NextRequest, NextResponse } from 'next/server'

const API_BASE_URL = process.env.OAUTH42_ISSUER || 'https://api.oauth42.com'

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

    const response = await fetch(`${API_BASE_URL}/api/social-auth/init`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        provider: 'slack',
        client_id: body.client_id,
        is_signup: body.is_signup || true,
        state: body.state,
      }),
    })

    const data = await response.json()

    if (!response.ok) {
      return NextResponse.json(data, { status: response.status })
    }

    return NextResponse.json(data)
  } catch (error) {
    console.error('[Social Auth] Error:', error)
    return NextResponse.json(
      { error: 'Failed to initiate social auth' },
      { status: 500 }
    )
  }
}

Using Hosted Auth? Skip this step! OAuth42's hosted auth pages automatically include the Slack Sign-In button when you enable the provider.

Step 7: Test Slack Sign-In

  1. Start your application
  2. Navigate to your login page
  3. Click "Sign in with Slack"
  4. You'll be redirected to Slack's authorization page
  5. Sign in and authorize the application
  6. Slack redirects back to OAuth42
  7. OAuth42 creates/links your user and redirects to your app
  8. You're now logged in!

Success! Your users can now sign in with their Slack accounts.

How Account Linking Works

OAuth42 intelligently handles user accounts based on their Slack profile:

New User (Signup)

A new user account is created with their Slack profile info (name, email, profile picture).

Existing Slack User (Login)

If the Slack account ID is already linked to a user, they're logged into that existing account.

Existing Email User

If a user with the same email already exists (from email/password signup or another provider), the Slack account is linked to that existing account.

Multiple Social Providers

Users can link multiple social providers (Google, Apple, Facebook, GitHub, GitLab, LinkedIn, Discord, Slack, X) to the same account, giving them flexibility in how they sign in.

Security Considerations

  • OpenID Connect: Slack uses OpenID Connect for secure authentication
  • State Parameter: CSRF protection via cryptographically random state tokens
  • Nonce: Additional replay attack protection with nonce parameter
  • Encrypted Storage: Slack Client Secrets are encrypted at rest using AES-256
  • Minimal Scopes: Only openid, email, and profile scopes are requested

Troubleshooting

"Invalid redirect_uri" error

The callback URL isn't configured correctly. Go to Slack API → OAuth & Permissions → Redirect URLs and add the exact OAuth42 callback URL: https://api.oauth42.com/api/social-auth/callback

"Slack social login not configured" error

The Slack OAuth credentials are not configured for this application. Go to the OAuth42 Portal → Applications → Your App → Social Providers tab and verify that Slack is configured with valid credentials.

"Failed to authenticate with Slack" error

This usually means the Client ID or Client Secret is incorrect. Double-check your credentials in both the Slack API dashboard and OAuth42 Portal.

"Slack did not provide email" error

Make sure you've added the email scope to your Slack app's User Token Scopes.

Next Steps

Need Help?

Having trouble with Slack Sign-In? Check our documentation or reach out to support.

Documentation →Discord →