Skip to content

Authentication for Developers

Authentication and Authorization Using OAuth, MBARI AD and SuperTokens

--- title: Authentication and Authorization Using OAuth, MBARI AD and SuperTokens --- flowchart LR subgraph SuperTokens postgresql(PostgreSQL) supertokens-core(Core) supertokens-dashboard(/auth/dashboard) end subgraph backend mssql-db[(MiniROV DiveLog DB)] subgraph nodejs env(.env) express(Express App) ssl(SSL) database-connection(DB Connection) openapi-rest(OpenAPI REST) rest-endpoint(/rest) swagger-ui(Swagger UI) graphql(GraphQL Server) graphql-endpoint(/graphql) graphql-sandbox(GraphQL Sandbox) supertokens-sdk(SuperTokens SDK) auth-endpoints(/auth) end end subgraph VueJS Frontend dive-store(Dive Store REST) user-store(User Store) access-token(Access Token) graphql-client(Dive GraphQL) supertokens-client-sdk(SuperTokens Client SDK) ui-components(UI Components) end subgraph oauth-providers mbariad-cisco-duo github end mssql-db --> database-connection database-connection --> express express --> ssl ssl --> openapi-rest openapi-rest --> rest-endpoint openapi-rest --> swagger-ui env --> openapi-rest ssl --> graphql graphql --> graphql-endpoint graphql --> graphql-sandbox env --> graphql supertokens-core --> supertokens-sdk supertokens-sdk --> auth-endpoints mbariad-cisco-duo --> supertokens-core github --> supertokens-core postgresql --> supertokens-core supertokens-core --> supertokens-dashboard supertokens-client-sdk <--> github supertokens-client-sdk <--> mbariad-cisco-duo supertokens-client-sdk --> user-store supertokens-client-sdk <--> auth-endpoints user-store --> access-token access-token --> dive-store access-token --> graphql-client rest-endpoint --> dive-store graphql-endpoint --> graphql-client access-token --> ui-components

Telepresence/Slack Authorization

The Telepresence application uses OAuth and Slack as an authentication mechanism because it needs to be able to represent users to Slack from the API backend (on their behalf).

Steps:

  1. Register application with Slack
    1. You provide:
      1. Redirect URL(s)
        1. https://telepresence.mbari.org/api/v1/rest/auth-callback
        2. https://telepresence.mbari.org/api/v1/rest/auth-callback-2
      2. User scopes
        1. email
        2. identity.avatar
        3. identity.basic
        4. identity.email
        5. openid
      3. Bot scopes
        1. channels:history
        2. channels:join
        3. channels:manage
        4. chat:write
        5. chat:write.public
        6. commands
        7. groups:history
        8. im:history
        9. mpim:history
        10. users:read
    2. Slack provides:
      1. App ID
      2. Client ID
      3. Client Secret
      4. Signing Secret
      5. Verification Token
      6. App level token
        1. telepresence-dev-app-token = connections:write
      7. User OAuth token
      8. Bot User OAuth token
      9. Login button HTML
--- title: Telepresence Authentication --- sequenceDiagram Browser->>GraphQL API: Get app code GraphQL API-->>Browser: HTML/CSS/JS Browser->>Slack: /oauth/v2/authorize Slack-->>Browser: Prompt for login Browser->>Slack: Login Slack-->>Browser: Prompt for user info access Browser->>Slack: Allow Slack-->>Browser: Redirect with code Browser->>GraphQL API: /api/v1/rest/auth-callback GraphQL API->>Slack: slack.com/api/oauth.v2.access (code, clientID, etc.) Slack-->>GraphQL API: access token GraphQL API->>Slack: slack.com/api/openid.connect.userInfo (with access token) Slack-->>GraphQL API: user info(name, email, picture, etc.) GraphQL API-->>Browser: Redirect to slack.com/oauth/v2/authorize Browser->>Slack: slack.com/oauth/v2/authorize (with user access proxy requests) Slack-->>Browser: Ask user for permission to represent Browser->>Slack: Allow Slack-->>Browser: Redirect to telepresence.mbari.org/api/v1/rest/auth-callback-2 (with code) Browser->>GraphQL API: telepresence.mbari.org/api/v1/rest/auth-callback-2 with code from Slack GraphQL API->>Slack: slack.com/api/oauth.v2.access (code, clientID, etc.) Slack-->>GraphQL API: access token GraphQL API-->>Browser: Redirect to /login?access-token=xxxxx (saves token in browser)

Slack button HTML

<a href="https://slack.com/oauth/v2/authorize?client_id=4525206644.2730768730532&scope=channels:history,channels:join,channels:manage,chat:write,chat:write.public,commands,groups:history,im:history,mpim:history,users:read&user_scope=email,identity.avatar,identity.basic,identity.email,openid"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" /></a>

Login URL:

https://slack.com/oauth/v2/authorize?
user_scope=email,identity.avatar,identity.basic,identity.email,openid
&client_id=4525206644.2730768730532
&redirect_uri=https://telepresence.mbari.org/api/v1/rest/auth-callback
&team=04FF62JY

Walkthrough:

  1. Redirect 1: https://mbari.slack.com/oauth?client_id=4525206644.2730768730532&scope=&user_scope=email%2Cidentity.avatar%2Cidentity.basic%2Cidentity.email%2Copenid&redirect_uri=https%3A%2F%2Ftelepresence.mbari.org%2Fapi%2Fv1%2Frest%2Fauth-callback&state=&granular_bot_scope=1&single_channel=0&install_redirect=&tracked=1
  2. Click Allow:

  3. Redirect back to app: https://telepresence.mbari.org/api/v1/rest/auth-callback

  4. Redirect 2: https://mbari.slack.com/oauth?client_id=4525206644.2730768730532&scope=channels%3Ahistory%2Cchannels%3Ajoin%2Cchannels%3Amanage%2Cchat%3Awrite%2Cchat%3Awrite.public%2Ccommands%2Cgroups%3Ahistory%2Cim%3Ahistory%2Cmpim%3Ahistory&user_scope=chat%3Awrite%2Cchannels%3Awrite&redirect_uri=https%3A%2F%2Ftelepresence.mbari.org%2Fapi%2Fv1%2Frest%2Fauth-callback-2&state=&granular_bot_scope=1&single_channel=0&install_redirect=&tracked=1

  5. Click Alow:
  6. Redirect back to https://telepresence.mbari.org/api/v1/rest/auth-callback-2?code=4525206644.6563253540403.90872ef0043d9f287d14fd72ec8653d72bf84c5a136a530eabb74fbaeab39748&state=