how to create signin with slack flow in typescript

To implement Sign in with Slack you need to create an OAuth 2.0 app in your Slack workspace.

Then follow these steps:

1. Install @slack/oauth package by running the command:

   index.ts
   npm i @slack/oauth
   19 chars
   2 lines

2. Create an instance of the OAuthApp class:

   index.ts
   import { App as SlackApp } from '@slack/bolt';
   import { InstallProvider, CallbackOptions } from '@slack/oauth';
   
   const slackApp = new SlackApp({
       // Your other configs
   });
   
   const installProvider = new InstallProvider({
       clientId: process.env.SLACK_CLIENT_ID,
       clientSecret: process.env.SLACK_CLIENT_SECRET,
       stateSecret: process.env.SLACK_STATE_SECRET,
       installationStore: {
           storeInstallation: (installation) => {
               // Your code to store the installation
           },
           fetchInstallation: (query) => {
               // Your code to fetch the installation using query
           },
           deleteInstallation: (query) => {
               // Your code to delete the installation by query
           },
       },
   });
   737 chars
   24 lines

3. Create a callback that handles the installation of your app:

   index.ts
   const callbackOptions: CallbackOptions = {
       success: async (installation, installOptions, req, res) => {
           // Your code after the installation success
       },
       failure: (error, installOptions, req, res) => {
           // Your code after the installation failure
       },
   };
   
   // This route is called after the user clicks the "Add to Slack" button
   slackApp.route('/auth/slack/callback', async ({ request, response }) => {
       try {
           const result = await installProvider.handleCallback(request, response, callbackOptions);
           if (!result) {
               response.status(500).send('Something went wrong');
           }
       } catch (error) {
           console.error(error);
           response.status(500).send('Something went wrong');
       }
   });
   752 chars
   22 lines

4. Create a link to initiate Sign in with Slack flow:

   index.ts
   // This route redirects the user to Slack auth URL
   slackApp.route('/auth/slack', async ({ request, response }) => {
       try {
           const url = await installProvider.authorizeUrl({
               scopes: ['user:read', 'chat:write'],
               userScopes: ['search:read'],
               metadata: 'Some metadata',
               redirectUri: `https://${request.hostname}/auth/slack/callback`,
           });
           response.redirect(url);
       } catch (error) {
           console.error(error);
           response.status(500).send('Something went wrong');
       }
   });
   553 chars
   16 lines

When the user clicks the link, they'll be redirected to the Slack authorization page where they can sign in with their Slack credentials. Once they do that, your app receives an OAuth access token that you can use to make API calls on their behalf.