# Enterprise SSO Component

The Enterprise SSO Component can be used to assist in collecting the [necessary information](https://docs.byo.propelauth.com/sso/overview#collecting-information-from-your-customer) from your users to setup [Enterprise SSO](https://docs.byo.propelauth.com/sso/overview).

## Installation

1. [Install shadcn](https://docs.byo.propelauth.com/component-library/installation) 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](https://docs.byo.propelauth.com/sso/management-reference#create-oidc-client).

### api `SsoApi`

Includes three methods to be used to fetch, create, and delete OIDC clients in your backend. See [below](https://docs.byo.propelauth.com/component-library/components/enterprise-sso#frontend-example) for an example.

- #### get `() => Promise<Result<{ idpInfoFromCustomer?: IdpInfoFromCustomer }>>;`

A fetch request to your backend that returns the `idpInfoFromCustomer` object from the [Fetch OIDC Client](https://docs.byo.propelauth.com/sso/management-reference#fetch-oidc-client) API.

- #### upsert `(params: { idpInfoFromCustomer: IdpInfoFromCustomer }) => Promise<Result<void>>`

A POST request to your backend to [create an OIDC client](https://docs.byo.propelauth.com/sso/management-reference#create-oidc-client).

- #### remove `() => Promise<Result<void>>`

A DELETE request to your backend to [delete an OIDC client](https://docs.byo.propelauth.com/sso/management-reference#delete-oidc-client).

## Frontend Example

```javascript
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](https://docs.byo.propelauth.com/sso/management-reference#fetch-oidc-client) API.

```javascript
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](https://docs.byo.propelauth.com/sso/management-reference#create-oidc-client) using the `idpInfoFromCustomer` object sent from the frontend component.

```javascript
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](https://docs.byo.propelauth.com/sso/management-reference#delete-oidc-client).

```javascript
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 });
    }
});
```