How to Integrate “Sign in with Slack” Using AWS Cognito User Pools

1
#!/usr/bin/env node
2
import 'source-map-support/register';
3
import * as cdk from 'aws-cdk-lib';
4
import { CdkStack } from '../lib/cdk-stack';
5

6
const app = new cdk.App();
7
new CdkStack(app, 'CdkStack', {
8
  slackSecretArn: process.env.SLACK_SECRET_ARN ?? '',
9
  cognitoDomainPrefix: process.env.COGNITO_DOMAIN_PREFIX ?? '',
10
});

1
import * as cdk from 'aws-cdk-lib';
2
import type { Construct } from 'constructs';
3
import {
4
  OAuthScope,
5
  ProviderAttribute,
6
  UserPool,
7
  UserPoolClient,
8
  UserPoolClientIdentityProvider,
9
  UserPoolDomain,
10
  UserPoolIdentityProviderOidc,
11
} from 'aws-cdk-lib/aws-cognito';
12
import { Secret } from 'aws-cdk-lib/aws-secretsmanager';
13

14
export class CdkStack extends cdk.Stack {
15
  constructor(
16
    scope: Construct,
17
    id: string,
18
    props?: cdk.StackProps & {
19
      slackSecretArn: string;
20
      cognitoDomainPrefix: string;
21
    },
22
  ) {
23
    super(scope, id, props);
24

25
    // Cognito User Pool
26
    const userPool = new UserPool(this, 'user-pool', {
27
      userPoolName: 'sign-in-with-slack-user-pool',
28
    });
29

30
    // Cognito User Pool Domain
31
    new UserPoolDomain(this, 'user-pool-domain', {
32
      userPool,
33
      cognitoDomain: {
34
        domainPrefix: props?.cognitoDomainPrefix ?? '',
35
      },
36
    });
37

38
    // Cognito User Pool Client
39
    new UserPoolClient(this, 'user-pool-client', {
40
      userPool,
41
      userPoolClientName: 'client',
42
      oAuth: {
43
        flows: {
44
          authorizationCodeGrant: true,
45
        },
46
        callbackUrls: [
47
          'https://example.com/', // Cognito app client default
48
          'http://localhost:3000/',
49
        ],
50
        logoutUrls: ['http://localhost:3000/'],
51
        scopes: [
52
          OAuthScope.OPENID,
53
          OAuthScope.EMAIL,
54
          OAuthScope.PROFILE,
55
          OAuthScope.COGNITO_ADMIN,
56
        ],
57
      },
58
      supportedIdentityProviders: [
59
        UserPoolClientIdentityProvider.COGNITO,
60
        UserPoolClientIdentityProvider.custom('Slack'),
61
      ],
62
    });
63

64
    // Slack app credentials stored in your Secrets Manager
65
    const slackSecret = Secret.fromSecretCompleteArn(
66
      this,
67
      'slack-secret',
68
      props?.slackSecretArn ?? '',
69
    );
70

71
    // Cognito User Pool Identity Provider (OIDC)
72
    new UserPoolIdentityProviderOidc(this, 'slack-oidc', {
73
      userPool,
74
      name: 'Slack',
75
      clientId: slackSecret
76
        .secretValueFromJson('clientId')
77
        .unsafeUnwrap()
78
        .toString(),
79
      clientSecret: slackSecret
80
        .secretValueFromJson('clientSecret')
81
        .unsafeUnwrap()
82
        .toString(),
83

84
      // See https://api.slack.com/authentication/sign-in-with-slack#request
85
      // > Which permissions you want the user to grant you.
86
      // > Your app will request openid, the base scope you always need to request in any Sign in with Slack flow.
87
      // > You may request email and profile as well.
88
      scopes: ['openid', 'email', 'profile'],
89

90
      // See https://api.slack.com/authentication/sign-in-with-slack#discover
91
      issuerUrl: 'https://slack.com',
92

93
      // The following endpoints do not need to be configured because the Cognito can find them by the issuer url.
94
      // endpoints: {
95
      //   authorization: 'https://slack.com/openid/connect/authorize',
96
      //   token: 'https://slack.com/api/openid.connect.token',
97
      //   userInfo: 'https://slack.com/api/openid.connect.userInfo',
98
      //   jwksUri: 'https://slack.com/openid/connect/keys',
99
      // },
100

101
      attributeMapping: {
102
        email: ProviderAttribute.other('email'),
103
        profilePage: ProviderAttribute.other('profile'),
104
      },
105
    });
106
  }
107
}

1
NEXT_PUBLIC_USER_POOL_ID=<COGNITO_USER_POOL_ID>
2
NEXT_PUBLIC_USER_POOL_CLIENT_ID=<COGNITO_USER_POOL_CLIENT_ID>
3
NEXT_PUBLIC_OAUTH_DOMAIN=<COGNITO_DOMAIN_PREFIX>.auth.ap-northeast-1.amazoncognito.com

1
import { Amplify } from 'aws-amplify';
2
import {
3
  type AuthSession,
4
  fetchAuthSession,
5
  fetchUserAttributes,
6
  getCurrentUser,
7
  signInWithRedirect,
8
  signOut,
9
} from 'aws-amplify/auth';
10
import type { AuthConfig } from '@aws-amplify/core';
11
import type { AuthUser } from '@aws-amplify/auth';
12
import type { AuthUserAttributes } from '@aws-amplify/auth/dist/esm/types';
13

14
const authConfig: AuthConfig = {
15
  Cognito: {
16
    userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID ?? '',
17
    userPoolClientId: process.env.NEXT_PUBLIC_USER_POOL_CLIENT_ID ?? '',
18
    loginWith: {
19
      oauth: {
20
        // Ensure this does not start with "https://"
21
        domain: process.env.NEXT_PUBLIC_OAUTH_DOMAIN ?? '',
22
        scopes: [
23
          'openid',
24
          'email',
25
          'profile',
26
          // Required for the `fetchUserAttributes` function
27
          'aws.cognito.signin.user.admin',
28
        ],
29
        providers: [{ custom: 'Slack' }],
30
        // Redirect URLs must match Cognito app client configuration exactly, including the trailing slash.
31
        redirectSignIn: ['http://localhost:3000/'],
32
        redirectSignOut: ['http://localhost:3000/'],
33
        responseType: 'code',
34
      },
35
    },
36
  },
37
};
38
Amplify.configure({ Auth: authConfig });
39

40
// Fetch the current session
41
export async function authSession(): Promise<AuthSession> {
42
  return await fetchAuthSession();
43
}
44

45
// Fetch the currently authenticated user
46
export async function authCurrentUser(): Promise<AuthUser> {
47
  return await getCurrentUser();
48
}
49

50
// Fetch user attributes
51
export async function fetchAttributes(): Promise<AuthUserAttributes> {
52
  // Requires the 'aws.cognito.signin.user.admin' scope
53
  return await fetchUserAttributes();
54
}
55

56
// Redirect to the Slack sign-in page
57
export async function authSignIn(): Promise<void> {
58
  await signInWithRedirect({
59
    provider: { custom: 'Slack' },
60
  });
61
}
62

63
// Sign out the user
64
export async function authSignOut(): Promise<void> {
65
  await signOut();
66
}

1
'use client';
2

3
import { useEffect, useState } from 'react';
4
import {
5
  authSession,
6
  authSignOut,
7
  authSignIn,
8
  authCurrentUser,
9
  fetchAttributes,
10
} from '@/auth';
11
import type { AuthUser } from '@aws-amplify/auth';
12
import type { AuthUserAttributes } from '@aws-amplify/auth/dist/esm/types';
13

14
export default function Home() {
15
  const [user, setUser] = useState<AuthUser>();
16
  const [attributes, setAttributes] = useState<AuthUserAttributes>();
17

18
  useEffect(() => {
19
    (async () => {
20
      const session = await authSession();
21
      if (session.tokens) {
22
        setUser(await authCurrentUser());
23
        setAttributes(await fetchAttributes());
24
      } else {
25
        await authSignIn();
26
      }
27
    })();
28
  }, []);
29

30
  return (
31
    <div className="flex flex-col items-center w-full h-screen max-w-screen-md mx-auto mt-8">
32
      <div className="flex flex-col gap-4">
33
        <div className="flex gap-2">
34
          <div className="w-20">Username:</div>
35
          <div>{user?.username}</div>
36
        </div>
37

38
        <div className="flex gap-2">
39
          <div className="w-20">User ID:</div>
40
          <div>{user?.userId}</div>
41
        </div>
42

43
        <div className="flex gap-2">
44
          <div className="w-20">Email:</div>
45
          <div>{attributes?.email}</div>
46
        </div>
47

48
        <div className="self-end">
49
          <button
50
            type="button"
51
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
52
            onClick={authSignOut}
53
          >
54
            Sign out
55
          </button>
56
        </div>
57
      </div>
58
    </div>
59
  );
60
}