In this article, I will cover how to use socialite to authenticate with Slack. I will also guide you how to create your own API keys on the developer dashboard which will be used to authenticate users. This article will outline the basics of using slack authentication system. I also plan to write another article where I plan to explore the socialite package and source-dive the code to figure out how it works behind the scene. So, feel free to stick around for that as well!
Using third-party authorization tools allow users to bypass manually typing their emails every time during the authentication process. So, it’s worth integrating if necessary!

Prerequisites

  • Basic Laravel and artisan understanding
  • Working Laravel project with Breeze authentication or of your choice
  • A slack account

Setting Up Slack App

To integrate slack authentication, we first of all need to create an app on slack. Slack will use this app to access any user’s information that tries to authenticate with your application. To get started, simply go to slack apps URL and click on “Create An App”

If you don’t see this view or the button, you might need to sign in with your slack account first. Create the app from scratch using slack’s default configurations. Enter the app name and the workspace you want to create this app for and click “Create App” button. Slack will create your app and redirect you to the dashboard.

From this dashboard copy App ID and Client ID to your .env file against the SLACK_CLIENT_ID and SLACK_CLIENT_SECRET keys respectively. We are almost done with this but we just need to go through one more step.

You see, the slack app does not know where it will send the information of the users who have tried authenticating with it and as a result if we try and initiate the slack authentication process through our web application we will not receive the data back. Our web application needs the authenticated user’s data such as name and email to create the user and persist to the database.

So to solve this problem, we need to provide a redirect URL to the slack application. This callback URL will point to a URL in our Laravel application so that slack can communicate with our web application and send traffic. In this way, we will be able to retrieve user’s data and process it.

Navigate to “OAuth & Permissions” in the sidebar and scroll down to the Redirect URLs section. Add a new URL and hit save URLs. For demonstration purposes, I have added the following URL https://socialite.test/slack/callback but feel free to use whatever you like. We will now move towards next part

Configuring Laravel Socialite for Slack

Install socialite in our Laravel application

Zsh
composer require laravel/socialite

If you have not already copied SLACK_CLIENT_ID and SLACK_CLIENT_SECRET to your .env file, it’s time to do this. You should also reference these credentials in config/services.php config file as per socialite documentation. So go ahead and add them. Make sure to also add the redirect URL. This should be the same URL that we added on slack dashboard. This will enable slack app to communicate with our web app.

PHP
'slack' => [
    'client_id' => env('SLACK_CLIENT_ID'),
    'client_secret' => env('SLACK_CLIENT_SECRET'),
    'redirect' => env('APP_URL').'/slack/callback',
    'notifications' => [
        'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
        'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
    ],
],

Afterwards we will add the authorize URL. This URL will initiate the authentication process. We will also add the callback URL that we added earlier. Go ahead and create these URLs in the auth.php or the route file of your choice.

PHP
Route::middleware('guest')->group(function () {
    Route::name('slack.')->prefix('slack')->group(function () {
        Route::get('authorize', [LoginController::class, 'initiateSlackLogin'])->name('authorize');
        Route::get('callback', [LoginController::class, 'completeSlackLogin'])->name('callback');
    });
});

Create the LoginController and add initiateSlackLogin and completeSlackLogin methods to this controller. In real world, you might want to create a separate class for each OAuth service provider. As the name suggests we will use initiateSlackLogin function to kick start the whole process

PHP
use Illuminate\Http\RedirectResponse;
use Symfony\Component\HttpFoundation\RedirectResponse as HttpFoundationRedirectResponse;


class LoginController extends Controller
{
    public function initiateSlackLogin(): RedirectResponse|HttpFoundationRedirectResponse 
    {
        return Socialite::driver('slack')->redirect();
    }
}

Once this endpoint https://socialite.test/slack/authorize is hit, socialite’s API will take over and redirect users to the following slack OAuth URL https://slack.com/openid/connect/authorize. I plan to cover and source-dive into socialite code in part 2 of this so feel free to join me there.

After the user has allowed slack to access their information, slack will redirect back to the callback URL we provided URL. Let us process that next. Add the following code to the LoginController

PHP
public function completeSlackLogin(): RedirectResponse
{
    $user = Socialite::driver('slack')->user();

    $appUser = User::query()->updateOrCreate([
        'slack_id' => $user->id
    ], [
        'name' => $user->name,
        'email' => $user->email,
        'password' => Hash::make(Str::random()),
        'slack_token' => $user->token,
        'slack_refresh_token' => $user->refreshToken,
    ]);

    Auth::login($appUser);

    return redirect('login');
}

With this in place we have the user persisted to the database and our back-end part is complete.

Adding Slack Login Button

Before we wrap this up, we just need to add the “Sign in with Slack” button to front-end. If we take a look at slack API documentation, there is a Button design guidelines for authentication buttons. In addition Slack also provides a convenient tool to design buttons making it easier to adhere to their guidelines. Using this tool and adding the authorize route on top of it, we get the following code

HTML
<div class="flex flex-col external-logins space-y-4 mb-2">
    <a class="w-full" href="{{ route('slack.authorize') }}"
        style="align-items:center;color:#fff;background-color:#4A154B;border:0;border-radius:4px;display:inline-flex;font-family:Lato, sans-serif;font-size:16px;font-weight:600;height:48px;justify-content:center;text-decoration:none;"><svg
            xmlns="http://www.w3.org/2000/svg" style="height:20px;width:20px;margin-right:12px"
            viewBox="0 0 122.8 122.8">
            <path
                d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
                fill="#e01e5a"></path>
            <path
                d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
                fill="#36c5f0"></path>
            <path
                d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
                fill="#2eb67d"></path>
            <path
                d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
                fill="#ecb22e"></path>
        </svg>Sign in with Slack
    </a>
</div>

Notice that we have added the href="{{ route('slack.authorize') }}" to redirect the user to kick start authentication process. With this front-end update, we have the something like this

Before trying this out make sure you have added SLACK_CLIENT_ID & SLACK_CLIENT_SECRET to your .env file and don’t forget to configure config/services.php as well. I will leave the rest to you. Go ahead, give it a shot. Good luck and happy coding 🚀🚀🚀

Blog

Tagged in:

,