Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin


SSO with Okta

enterprise plans

If your organization is using Okta as an identity provider, you can set up Single Sign-On (SSO) with either OIDC or SAML 2.0. This guide covers both methods of integrating with Okta.

To get the most out of this guide, you must be:

  • On an Enterprise plan
  • An Organization Admin

There are two main steps to setting up SSO with Builder and Okta:

  1. Configuring Okta by creating an application integration
  2. Configuring Builder by adding Okta

1. Go to your Okta Dashboard and expand the Applications section. The redirect URL takes the following format: https://my-org-admin.okta.com/admin/apps/active.

2. Click Applications.

3. Click the Create Application Integration button.

4. In the dialogue that opens, choose OIDC - OpenID Connect for the Sign-in method.

5. For the Application type, choose the type of application you're developing.

6. Click Next.

7. Name the app integration Builder.io.

8. Add the Builder logo. Click the image below to open the logo in a new tab if needed.

Builder Logo

9. Add the Sign-redirect URI:

https://builder.io/__/auth/handler

10. Select an option in the Assignments section according to your needs. In the example video at the end of this section, we elected to skip that part.

11. Click Save.

The following video demonstrates this process in Okta:

While in Okta, take note of your Client ID and your Issuer URL, which you need when you configure Builder. They are located as follows and as highlighted in the next image.

  • Client ID: Okta Dashboard -> Applications -> General -> Client Credentials.
  • Issuer URL: Click on your name in the upper right. Hover over the domain to copy.
Image of the Applications section of the Okta dashboard. The Client ID and Issuer URL have labels and arrows pointing at them to help locate them.

By default, usernames are not mapped between Builder and identity providers. However, administrators can establish this connection by mapping a specific name field from the identity provider to the name attribute in Builder.

To map usernames in Okta:

  1. Go to your Okta dashboard.
  2. Expand the Applications section and go to Applications.
  3. In the Sign On tab, in the Settings section, click on Configure Profile Mapping.
  4. Choose the field you'd like to map for the users names.

The image below shows the profile mappings in Okta for the name.

Screenshot of the profile mappings in Okta with user dot displayName mapped to Builder's name string.

To integrate Okta with Builder:

  1. Go to your Organization Settings.
  2. Click the Edit button next to Sign Sign-On.
  3. For SSO method, choose OIDC.
  4. Enter a human-friendly display name. This is the name that your users will refer to.
  5. Enter a Provider ID for the SSO Name field. You'll use this to sign into Builder through a URL such as https://builder.io/login/oidc/demo-org.
  6. Enter the Client ID that you noted during the Okta configuration. You can find it in your Okta Admin Dashboard -> Applications -> General -> Client Credentials.
  7. Enter your Issuer URL that you noted during the Okta configuration. Usually, it has the format of your-company.okta.com. You can find it in the menu that displays when you click on your name at the upper right of the Okta dashboard.
Screenshot of the configuration settings for SSO in the Organization Account Settings.

After saving the SSO integration, you can test the login flow by logging out and visiting https://builder.io/login/oidc/<your-sso-name>.

Tip: You cannot use SSO if your browser doesn't support cookies. If you're in an incognito window, ensure that cookies are enabled.

You can optionally add the integration to your Okta dashboard so users can sign into Builder directly from Okta:

  1. Go to the Okta Admin Dashboard -> Applications -> General -> Login.
  2. Add your SSO name that you configured above in the Initiate login URI field. For example, https://builder.io/login/oidc/<your-sso-name>.

The following image illustrates where to add the SSO name:

Screenshot of the Okta Login Settings with Display application icon to users checked, Redirect to app to initiate login (OIDC Compliant) selected, and the login URI entered.

1. Go to your Okta Dashboard and expand the Applications section. The URL takes the following format: https://my-org-admin.okta.com/admin/apps/active.

2. Click Applications.

3. Click the Create Application Integration button.

4. In the dialogue that opens, choose SAML 2.0 for the Sign-in method.

6. Click Next.

7. Name the app integration Builder.io.

8. Add the Builder logo. Click the image below to open the logo in a new tab if needed.

9. Add the Single Sign-On URL:

https://builder.io/__/auth/handler

10. Add your Audience URI (SP Entity ID).

11. Click Show Advanced Settings.

12. Add your SAML Issuer ID in this format: http://www.okta.com/${org.externalKey}.

13. Click Next.

Due to recent browser updates, if you previously used the Firebase URL, you must update your authentication domain for SSO to ensure compatibility and security.

To accommodate these changes and maintain existing SSO configurations:

  1. Update the ACS URL: Replace the previous redirect URL of https://builder-3b0a2.firebaseapp.com/__/auth/handler with the new domain https://builder.io/__/auth/handler. This applies to both SAML and OIDC configurations and must be updated in the Identity Provider (IdP) settings.
  2. Update the login URL: Append the query parameter authDomain=new to the login URL. For example, a bookmarked login URL would be formatted as https://builder.io/login/saml/builder?authDomain=new. Including this parameter ensures compatibility with the new custom domain. Omitting it may lead to incompatibility issues, affecting SSO functionality with recent versions of browsers such as Firefox and Safari.

For IdP-initiated logins, the login URL provided by the IdP must also include the authDomain=new parameter for seamless integration.

If you're using OIDC, you can leverage Code Flow. For details, read Using Code Flow with SSO.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Visual Copilot

Visual Headless CMS

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Ebook

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Headless Commerce Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get StartedLog In
© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences