> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superblocks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Google SSO setup

export const Alert = ({type, title, children}) => {
  const getIcon = () => {
    switch (type) {
      case 'info':
        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
      case 'success':
        return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm4.293 6.293L9 11.586 5.707 8.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414l4 4c.391.391 1.024.391 1.414 0l6-6c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%230CC26D'/%3E%3C/svg%3E";
      case 'warning':
        return "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxMDgwJyBoZWlnaHQ9JzEwODAnPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3RyYW5zcGFyZW50Jy8+PHBhdGggZD0nTTEzLjc5NCAxMC43NSA4LjMgMS4yNWExLjUgMS41IDAgMCAwLTIuNiAwbC01LjQ5NCA5LjVBMS40OTQgMS40OTQgMCAwIDAgMS41IDEzaDExYTEuNDkzIDEuNDkzIDAgMCAwIDEuMjk0LTIuMjVNNi41IDUuNWEuNS41IDAgMCAxIDEgMFY4YS41LjUgMCAwIDEtMSAwek03IDExYS43NS43NSAwIDEgMSAwLTEuNS43NS43NSAwIDAgMSAwIDEuNScgc3R5bGU9J3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojZmY5ZjM1O2ZpbGwtcnVsZTpub256ZXJvO29wYWNpdHk6MScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLjAyIDE5LjMwNSlzY2FsZSg3Ny4xNCknLz48L3N2Zz4=";
      case 'danger':
        return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm5.707 4.293L10 9.586 4.293 4.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414L8.586 11l-5.707 5.293c-.391.391-.391 1.024 0 1.414s1.024.391 1.414 0L10 12.414l5.707 5.293c.391.391 1.024.391 1.414 0s.391-1.024 0-1.414L11.414 11l5.707-5.293c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%23F45252'/%3E%3C/svg%3E";
      case 'note':
        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
      default:
        return "";
    }
  };
  return <div className={`alert alert--${type}`}>
      <div className="alert-icon" style={{
    backgroundImage: `url("${getIcon()}")`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '20px',
    width: '24px',
    height: '24px',
    position: 'absolute',
    left: '16px',
    top: '16px'
  }} />
      <div className="alert-content">
        {title && <div className="alert-title">{title}</div>}
        <div className="alert-body">{children}</div>
      </div>
    </div>;
};

Superblocks single sign-on (SSO) with Google Workspace lets your team seamlessly authenticate and access Superblocks using their Google credentials. This guide walks through how to configure single sign-on for Superblocks.

## Prerequisites

To setup SSO for your organization, you'll need:

* A Google Workspace account
* Google Workspace administration access
* A Superblocks organization on the **[Enterprise](https://www.superblocks.com/pricing)** plan

## Setup Google Workspace

Set up single sign-on for Google by creating either a **SAML** or **OIDC** application. For full details, see Google's guides for how to:

* [Create a custom SAML app](https://support.google.com/a/answer/6087519)
* [Set up OAuth 2.0 (OIDC)](https://support.google.com/googleapi/answer/6158849)

<Alert type="info">
  For the fastest setup and seamless integration with Superblock's Sign-in with Google experience, <a href="#create-an-oauth-app">create an OAuth2.0 app</a>.

  <br />

  <br />

  If you plan on using SCIM for user provisioning and group management, <a href="#create-a-saml-app">create a SAML app</a>. Learn more about <a href="/admin/org-administration/auth/scim/">Managing users and groups with SCIM</a>.
</Alert>

### Create an OAuth app

1. Log in to Google Cloud and go to the [**API Console**](https://console.developers.google.com/)

2. Select a Google Cloud project or create a new one

3. Navigate to the **APIs & services** page from the left side menu

4. On the left, click **Credentials**

5. Click **Create Credentials**, then select **OAuth client ID**

6. Select **Web application** as the **Application type**

7. Configure the following settings for your application

   <table>
     <tr>
       <th style={{ width: 250 }}>Name</th>

       <td>
         <strong>Superblocks</strong>, or a custom name
       </td>
     </tr>

     <tr>
       <th>Authorized JavaScript origins</th>

       <td>
         <code>[https://login.superblocks.com](https://login.superblocks.com)</code>
       </td>
     </tr>

     <tr>
       <th>Authorized redirect URIs</th>

       <td>
         <code>[https://login.superblocks.com/login/callback](https://login.superblocks.com/login/callback)</code>
       </td>
     </tr>
   </table>

8. Click **Create**. A modal will open with your OAUth client information. Keep this modal open and go to the section below to determine [what info to send to Superblocks](#oauth-application).

### Create a SAML app

1. Log in to Google Workspace and go to the **Admin Console**

2. Navigate to **Apps** → **Web and mobile apps**

3. Click **Add App** → **Add custom SAML app**

4. Provide the general information for the integration and click **Continue**

5. On the **Google Identity Provider details** download the **IDP metadata** file, or copy and save the [info to send to Superblocks](#saml-application)

6. Click **Continue**

7. Enter the following information into the **Service Provider Details**

   <table>
     <tr>
       <th style={{ width: 200 }}>ACS URL</th>

       <td>
         <code>[https://login.superblocks.com/login/callback?connection=\{CompanyName}-SAML](https://login.superblocks.com/login/callback?connection=\{CompanyName}-SAML)</code>
       </td>
     </tr>

     <tr>
       <th>Entity ID</th>

       <td>
         <code>urn:auth0:superblocks-prod:\{CompanyName}-SAML</code>
       </td>
     </tr>

     <tr>
       <th>Name ID format</th>
       <td>EMAIL</td>
     </tr>

     <tr>
       <th>Name ID</th>
       <td>Basic Information > Primary email</td>
     </tr>
   </table>

   <Alert type="warning">
     Replace <code>{`{CompanyName}`}</code> with your company's name. Remove all spaces and special characters from the name. If your company name is multiple words, capitalize the first letter of each word.

     <br />

     <br />

     For example, the company River Bank Technologies would become <code>RiverBankTechnologies</code>.
   </Alert>

8. Click **Continue**

9. Click **Add mapping** and configure the following user attributes

   | Google Directory attributes | App attributes |
   | --------------------------- | -------------- |
   | Primary email               | email          |
   | First name                  | givenname      |
   | Last name                   | surname        |

10. Click **Finish** and continue to [send your SAML app info to Superblocks](#saml-application).

## Send IDP info to Superblocks

### OAuth application

Send the following information to [support@superblocks.com](mailto:support@superblocks.com)

<table>
  <tr>
    <th style={{ width: 200 }}>Client ID</th>

    <td>
      The public identifier for your client located on the{" "}
      <strong>General</strong> tab of your application.
    </td>
  </tr>

  <tr>
    <th>Client Secret</th>

    <td>
      The <strong>secret</strong> value shows in the{" "}
      <strong>CLIENT SECRETS</strong> section. Note: we recommend using a secure
      transfer mechanism such as `https://onetimesecret.com` or similar to send
      the secret.
    </td>
  </tr>

  <tr>
    <th>Google Workspace domain</th>

    <td>
      Google Workspace domain name for your organization.
    </td>
  </tr>

  <tr>
    <th>Domains</th>

    <td>
      A list of domain and domain aliases your employees should be able to use when logging in to Superblocks.
    </td>
  </tr>
</table>

### SAML application

Send the following information to [support@superblocks.com](mailto:support@superblocks.com)

<table>
  <tr>
    <th style={{ width: 200 }}>Connection Name</th>

    <td>
      The connection name you created above and configured in the ACS URL and Entity ID.
    </td>
  </tr>

  <tr>
    <th style={{ width: 200 }}>SSO URL</th>

    <td>
      The <strong>Identity Provider Single Sign-On URL</strong> provided when you created the SAML app.
    </td>
  </tr>

  <tr>
    <th>X509 Signing Certificate</th>
    <td>The certificate downloaded from the Identity Provider details</td>
  </tr>

  <tr>
    <th>Domains</th>

    <td>
      A list of domain and domain aliases your employees should be able to use when logging into Superblocks.
    </td>
  </tr>
</table>
