Enterprise SSO Component

The Enterprise SSO Component can be used to assist in collecting the necessary information from your users to setup Enterprise SSO.

Installation

1. Install shadcn in your application.
2. Install the component.

   npx shadcn@latest add https://components.propelauth.com/r/enterprise-sso.json

Properties

redirectUrl string

Also known as a callback URL, this is the value that your customers will be redirected to after authenticating with their IdP. This value must match the value used when Creating the OIDC Client.

api SsoApi

Includes three methods to be used to fetch, create, and delete OIDC clients in your backend. See below for an example.

• get () => Promise<Result<{ idpInfoFromCustomer?: IdpInfoFromCustomer }>>;

A fetch request to your backend that returns the idpInfoFromCustomer object from the Fetch OIDC Client API.

• upsert (params: { idpInfoFromCustomer: IdpInfoFromCustomer }) => Promise<Result<void>>

A POST request to your backend to create an OIDC client.

• remove () => Promise<Result<void>>

A DELETE request to your backend to delete an OIDC client.

Frontend Example

import SsoSetup from '@/components/sso/sso-setup';

import type { SsoApi } from '@/lib/sso/sso-types';

const api: SsoApi = {
    async get() {
        const r = await fetch(`/api/setup/sso`);
        if (!r.ok) return { ok: false, error: { status: r.status, message: await r.text() } };
        return { ok: true, data: await r.json() };
    },
    async upsert(body) {
        const r = await fetch(`/api/setup/sso`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
        });
        return r.ok
            ? { ok: true, data: undefined }
            : { ok: false, error: { status: r.status, message: await r.text() } };
    },
    async remove() {
        const r = await fetch(`/api/setup/sso`, { method: "DELETE" });
        return r.ok
            ? { ok: true, data: undefined }
            : { ok: false, error: { status: r.status, message: await r.text() } };
    },
};

export default function Page() {
    return (
        <SsoSetup
            redirectUrl='http://<your-domain>/api/auth/finish-login'
            api={api}
        />
    );
}

Backend Example

It is required to build three routes in your backend to use the SsoSetup component - each corresponding with one of the three methods included in the api argument detailed above.

GET

Returns the idpInfoFromCustomer object from the Fetch OIDC Client API.

router.get("/api/setup/sso", async (_req: Request, res: Response) => {
    const result = await client.sso.management.fetchOidcClient({
        customerId: "{your_id_for_your_customer}",
    });
    if (result.ok) {
        const response = {"idpInfoFromCustomer": result.idpInfoFromCustomer};
        res.json(response);
    } else {
        res.status(404).json({ error: result.error });
    }
});

POST

Creates an OIDC client using the idpInfoFromCustomer object sent from the frontend component.

router.post("/api/setup/sso", async (req: Request, res: Response) => {
    const createResult = await client.sso.management.createOidcClient({
        idpInfoFromCustomer: req.body.idpInfoFromCustomer,
        customerId: "{your_id_for_your_customer}",
        redirectUrl: "http://<your-domain>/api/auth/finish-login"
    });
    if (result.ok) {
        res.json({ success: true });
    } else {
        res.status(400).json({ error: result.error });
    }
});

DELETE

Deletes an OIDC client.

router.delete("/api/setup/sso", async (_req: Request, res: Response) => {
    const deleteResult = await client.sso.management.deleteOidcClient({
        customerId: "{your_id_for_your_customer}",
    });
    if (deleteResult.ok) {
        res.json({ message: "SSO configuration deleted successfully" });
    } else {
        res.status(404).json({ error: result.error });
    }
});