# Okta

## Introduction

With an `Okta` SSO implementation, users log into the Patchworks dashboard from Okta. Your Okta administrator determines who has access to Patchworks and these users will see a Patchworks app in their Okta dashboard - for example:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F0yhh3iSDDpagfCpoEvGB%2Fokta%20app%20added%202.png?alt=media&#x26;token=0e04e2ce-58e1-4189-8756-81b22dd70350" alt=""><figcaption></figcaption></figure></div>

Selecting this app directs the authenticated user to the Patchworks dashboard, where they are logged in directly. Okta users never see or require a password to access the Patchworks dashboard.&#x20;

{% hint style="info" %}
Your Okta administrator requires a Patchworks account with administrator permissions to complete this setup.
{% endhint %}

This guide details the setup required to integrate Patchworks with Okta. For clarity, the setup is documented in three stages:

* [Stage 1: Patchworks - add OktaOne provider & generate URL](#stage-1-patchworks-add-okta-provider-and-generate-urls)s
* [Stage 2: Okta - add Patchworks app & apply URLs](#stage-2-okta-add-patchworks-app-and-apply-urls)
* [Stage 3: Patchworks - apply Okta credentials & enable](#stage-3-patchworks-final-setup)

## Demo

The steps detailed in this guide are shown in this demonstration video:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FBtHnCrRGlyrZWhsYbC4g%2FOkta%20setup%20demo.gif?alt=media&#x26;token=02aa2d0e-a1ec-41ca-83a1-f2612458289f" alt=""><figcaption></figcaption></figure></div>

## Prerequisites

* Your Patchworks user account must be associated with [administrator permissions](https://doc.wearepatchworks.com/product-documentation/users-roles-and-permissions/roles-and-permissions-summary).
* You must have administrator access to your Okta dashboard.

## Stage 1: Patchworks - add Okta provider & generate URLs

In this stage, we add a new SSO provider in Patchworks using your Okta base URL. This generates a set of URLs that we'll go on to apply in Okta.&#x20;

**Step 1**\
Log into the [Patchworks dashboard](https://app.wearepatchworks.com/) and select `my company admin` from `general settings`:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FVug9swL4CvhMUF8Z7q86%2Fsso%201.png?alt=media&#x26;token=62dce850-0191-4356-aa77-a24bbf8602e7" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
If you don't see this option, it's most likely that your user account is not associated with administrator permissions. In this case, please contact your system administrator.&#x20;
{% endhint %}

**Step 2**\
Click the `Okta` button:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FcM89oWNWPlA8HwKpwdq0%2Fokta%20a2.png?alt=media&#x26;token=d950157d-b572-495b-856d-b88cf6c4302a" alt="" width="375"><figcaption></figcaption></figure></div>

**Step 3**\
When prompted, enter the base URL for your Okta account.

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2Fc3V2OcTsJBRohw8fWtkg%2Fokta%20a3.png?alt=media&#x26;token=30d9423d-6f25-4456-8275-f24c3582e974" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
This is the first part of the URL that you use to access your Okta dashboard - for example:\
[https://wearepatchworks.okta.com/](https://trial-6142540.okta.com/). For our working example, the base URL is:\
`https://trial-6142540.okta.com/`.
{% endhint %}

**Step 4**\
Click the `create` button:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F80oEY2pKno6KHL32BbmM%2Fokta%20a4.png?alt=media&#x26;token=599aa5fe-bd7f-4d95-9d39-d1e3eacbc7ff" alt="" width="375"><figcaption></figcaption></figure></div>

**Step 5**\
An Okra provider is added - click this entry:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F2IV4pHFH295ZZS6CW6NP%2Fokta%20a5.png?alt=media&#x26;token=076c787c-df5e-40d7-8e13-29508e0e0ee9" alt=""><figcaption></figcaption></figure></div>

**Step 6**\
You'll see that three Patchworks URLs have been generated - for example:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F3S95PQFo8xz2PgccOvR3%2Fokta%20a6.png?alt=media&#x26;token=399ef54f-400e-4ee1-b569-898565c08f70" alt=""><figcaption></figcaption></figure></div>

These URLs are needed to complete your [Okta setup in the next stage](#stage-2-okta-setup). For reference, these are:

| Patchworks URL          | Okta usage                                           |
| ----------------------- | ---------------------------------------------------- |
| Initiate sign-in url    | `Login` > `Initiate login URI`                       |
| Callback url (auth url) | `New Web App Integration` > `Sign-in redirect URIs`  |
| Logout url              | `New Web App Integration` > `Sign-out redirect URIs` |

{% hint style="info" %}
Note that URLs shown in our screenshots are for a development environment -`dev.app.wearepatchworks.com`. Yours will always be for a production environment -`app.wearepatchworks.com`.
{% endhint %}

**Step 7**\
Optionally, you can click the `edit` option here and set a specific name for this implementation:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2Fu10inTgkiuPJO98hvRSo%2FOkta%20name.png?alt=media&#x26;token=427617ea-9231-4fbf-8b0d-75cf9cc3be0f" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
This isn't mandatory but using specific names can be useful if you're adding multiple implementations of the same type. Remember to save your change if you do update the name.&#x20;
{% endhint %}

**Step 8**\
Leave this page open and switch to another browser tab for the next stage.

## Stage 2: Okta - add Patchworks app & apply URLs

In this stage, we create a new app for Patchworks in Okta. As part of this setup, we will provide URLs generated by Patchworks, at the end of the previous stage.

**Step 1**\
Access Okta `admin`for your organisation:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F9XiaoiFGfy9SPIDeedUL%2Fokta%20b1a.png?alt=media&#x26;token=89cf26a2-4314-4438-beb6-ef279fcff007" alt=""><figcaption></figcaption></figure></div>

**Step 2**\
Choose to `add an app to use single sign-on`:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FUCv47bGmH8Q3IbuJfHCo%2Fokta%20b2a.png?alt=media&#x26;token=3ef86567-5c3f-4c7c-97dc-781413b691f3" alt=""><figcaption></figcaption></figure></div>

**Step 3**\
Choose to `create new app`:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FvDl5xUPSNt10CTaQA2GX%2Fokta%20b3a.png?alt=media&#x26;token=a8ef9a91-96ca-4b82-901a-38e649a14798" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
As an Okta administrator, you'll likely have your own shortcut/route to access this option - feel free to use these instead.
{% endhint %}

**Step 4**\
Select `OIDC - OpenID Connect` as the sign-in method:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FxR53G8WryhfPAWMKG3bg%2Fokta%20b4a.png?alt=media&#x26;token=44ac103c-72ba-4103-9ffe-9f9e2c3789d2" alt=""><figcaption></figcaption></figure></div>

**Step 5**\
Select `web application` as the `application type`:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FgIWuhuYbSNYpdcqUYOYY%2Fokta%20b5.png?alt=media&#x26;token=68357c7e-0775-4416-a396-c4a29f7405f3" alt=""><figcaption></figcaption></figure></div>

**Step 6**\
Click `next` to access the `New Web App Integration` page:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FeaYJf9HCJNlhoFkpUasD%2Fokta%20d1.png?alt=media&#x26;token=ca098422-8bbe-4ef5-9d94-71d848c7e7e1" alt=""><figcaption></figcaption></figure></div>

**Step 7**\
Update the following fields on this page (for URLs, you should switch back to the Patchworks dashboard to copy/paste values):

| Field                  | Summary                                                                                                                                          |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| Name                   | We suggest `Patchworks` or similar.                                                                                                              |
| Logo                   | Optionally, you can upload a logo. A selection of Patchworks logos is available beneath this table.                                              |
| Sign-in redirect URIs  | Paste the `callback url` from your Okta provider details in Patchworks (click once in the `callback url` field to copy the url to the clipboard) |
| Sign-out redirect URIs | Paste the `logout url` from your Okta details in Patchworks (click once in the `logout url` field to copy the url to the clipboard).             |
| Assignments            | Assign people and groups from your organisation who require access to the Patchworks dashboard.                                                  |

<details>

<summary><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2Fe24ddVSXGgzcMmLTF7SP%2Ficon%20download.png?alt=media&#x26;token=7291bfe9-763a-4b7c-ba81-f70ae4fff917" alt="" data-size="line"> Patchworks logos </summary>

Right-click and save the desired logo with a `.png` file extension.

<img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FCGm7jCVdHVIUsClQBIam%2Flogo-patchworks-yellow-black.png?alt=media&#x26;token=5d9327e2-e454-49f1-95ec-bd2b762fd13e" alt="" data-size="original">

<img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F9dBCmEpwCEzixo9VKUx8%2Flogo-patchworks-yellow.png?alt=media&#x26;token=0f149ea1-1d6f-4634-af8d-6ae96239e91e" alt="" data-size="original">

<img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2Fk7Wpc2mik8dsxBhN4Aqn%2Flogo-patchworks-black.svg?alt=media&#x26;token=74b02b4c-ec22-4797-b738-bc5002fbdc1c" alt="" data-size="original">

</details>

**Step 8**\
Save changes.

**Step 9**\
On the same page, move back up to `general settings` and select `edit`:

<figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FaxYppWO8KiDRxibBCjtT%2Fokta%20d2.png?alt=media&#x26;token=bc6818e5-ace8-4695-bdb5-d20f08861d52" alt=""><figcaption></figcaption></figure>

**Step 10**\
Move down to the `login` section and update fields as detailed below:

| Field                  | Required setting                                                                                                                                                  |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Login initiated by     | `Either Okta or App`                                                                                                                                              |
| Application visibility | `Display application to users`                                                                                                                                    |
| Initiate login URI     | Paste the `initiate sign-in url` from your Okta provider details in Patchworks (click once in the `initiate sign-in url` field to copy the url to the clipboard). |

For example:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FpDGLSyvaTcXrNUzbCzFc%2Fokta%20d4.png?alt=media&#x26;token=91ac8787-16dd-478e-b40c-65b058b55be4" alt=""><figcaption></figcaption></figure></div>

**Step 11**\
Save your changes.

{% hint style="info" %}
At this point, you may wish to assign a test user to try out the app once you've finished.&#x20;
{% endhint %}

## Stage 3: Patchworks - apply Okta credentials & enable

In this stage, we take client credentials generated in Okta, apply them to our Okta provider setup in Patchworks, and enable this SSO implementation.

**Step 1**\
Still on the `New Web App Integration` page in Okta, scroll to the `client credential`s section - you'll see `client id` and `client secret` details:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F4uZUo0j8WsY0QCJP7vN3%2Fokta%20e1.png?alt=media&#x26;token=1c001898-9812-4b02-b73a-fd1ded26c277" alt=""><figcaption></figcaption></figure></div>

**Step 2**\
In Patchworks, select the `edit` option for your Okta provider setup:

<figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FmcMlJmywAPvL1BqWpzoa%2Fokta%20e3a%201.png?alt=media&#x26;token=e76ddb0b-d232-4352-bdc2-7374ac64e522" alt=""><figcaption></figcaption></figure>

**Step 3**\
Copy and paste  `client id` and `client secret` values from Okta, into correlating Patchworks fields:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FChixN0RPNbt4P34R3Q3h%2Fokta%20e4a%201.png?alt=media&#x26;token=c6be6025-de56-4f92-8a27-770cf17494f2" alt=""><figcaption></figcaption></figure></div>

**Step 4**\
Toggle the `enable` option to `on`:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FfAFKHYWJixTVXFRAdN39%2Fokta%20e3a.png?alt=media&#x26;token=1891ae4e-8b1b-460d-a320-89b9101de915" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
The SSO implementation won't be operational until this setup is enabled.&#x20;
{% endhint %}

**Step 5**\
Save changes:

<div align="left"><figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2FF8dKB50mnJPY0bO3JQw8%2Fokta%20e6.png?alt=media&#x26;token=6e98e71a-68b8-485c-8ea0-13ed895e22c2" alt=""><figcaption></figcaption></figure></div>

Any assigned users in Okta should now see a Patchworks app in their Okta dashboard, ready for use:

<figure><img src="https://2440044887-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLYNcUBVQwSkOMG6KjZfz%2Fuploads%2F0yhh3iSDDpagfCpoEvGB%2Fokta%20app%20added%202.png?alt=media&#x26;token=0e04e2ce-58e1-4189-8756-81b22dd70350" alt=""><figcaption></figcaption></figure>
