# SSO Email Token

The SSO Token can be integrated inside an email action to authenticate a user into an application with a single click of a button. Email SSO Tokens are commonly used for things like Reset Password or User Registration workflows. This example however will detail how to use SSO tokens to authenticate a Manager user to review and approve employee expense reports.&#x20;

{% embed url="<https://www.loom.com/share/c3f745b5719e44c49b900af28727a8bc>" %}

### Create Manage Role

Before establishing the SSO Token, there is some setup needed to facilitate the workflow. Since a new Manager user group will be established, a Manager role is required to be assigned to the user group.

1. Click the **Access** tab within your Project
2. Click the **+New Role** button&#x20;
3. Title the Role **Manager**
4. Click **Create Role**

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FDSR4BLappNym10zyumLP%2Fmanagerrole.jpg?alt=media&#x26;token=a7f1a652-c5f7-4461-bcc2-88051b923ad6" alt=""><figcaption></figcaption></figure>

### Create Manage Resource

The SSO token performs a lookup against a Resource in order to authenticate a user into the application. Next, create a Manager Resource inside the Form.io Project to facilitate the Manager users.

1. Within the Project, click the **Resource** tab
2. Click the **+New Resource** button
3. Title the Resource **Manager**
4. Add an **Email** and **Password** field
5. Click the **Create Resource** button

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F9ThomEhIqTR4Ll9TuR9J%2FManagerResource.jpg?alt=media&#x26;token=edc74bfe-ec3e-412b-bc92-a7a5f3d6f4cf" alt=""><figcaption></figcaption></figure>

### Add Role Assignment Action

Next, add the Role Assignment action to the Manager Resource. This will ensure the Manager Users will receive the Manager role when a Manager user is created.&#x20;

1. Within the Manager Resource, click the **Action** tab
2. Select **Role Assignment** from the action dropdown and click **+Add Action**
3. Click the **Resource Association** dropdown and select **New Resource**
4. Click the **Action** **Type** and select **Add** **Role**
5. Click the **Role** dropdown and select the **Manager** Role.&#x20;
6. **Save** the Action

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FLTqvhJK7YgkGJ1lutPIz%2Fmanageraction.jpg?alt=media&#x26;token=1229fb34-bf43-427e-9247-e57c1819fac3" alt=""><figcaption></figcaption></figure>

### Establish Manager User Group

Make a submission against the Manager Resource to establish the User group.

1. Open the **Manager** Resource
2. Click the **Use** tab&#x20;
3. Make a **submission** to create a **Manager** account \
   E.G. <manager@example.com> / abc123

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FakR7r0o09m2bEYerRT3S%2Fmanagesubmission.jpg?alt=media&#x26;token=ce5dc40a-e033-4f5f-a111-5bc5bf46a995" alt=""><figcaption></figcaption></figure>

### Establish Employee User Group

The User Resource, which is automatically created within the Project, will be used to create the Employee users. This Resource already has an action in place to assign the Authenticated role to users submitted against this Resource.&#x20;

1. Open the default **User** Resource
2. Click the **Use** tab
3. Make a **submission** to create an **Employee** user account\
   E.G. <user@example.com> / abc123

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FlAiMpcqzSjxExhpKqS4z%2Fmanageruser.jpg?alt=media&#x26;token=a5d4a782-bac4-4829-bf3a-372093dd110f" alt=""><figcaption></figcaption></figure>

### Create Expense Report Form

This Form will be submitted by the Employee Users and in turn, reviewed by the Manager via the SSO token.&#x20;

1. Click the **Form** tab within the Project
2. Click the **+New Form** button
3. Title the Form **Expense Report.** Ensure the API Path for the form is expensereport
4. **Add** your own fields like a Text Field for the **Expense** and Currency field for the **Amount**&#x20;
5. Alternatively, import the following Expense Report form into your project using the **Import** button from the form tab.\
   **<https://examples-khvenypsypifjpi.form.io/expensereport>**
6. Click the **Create Form** button

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2Fl2myMQERyQFGU6aDLH4W%2Fexpensereport.jpg?alt=media&#x26;token=494eedc0-3b90-48ab-99a0-16d3768d4c79" alt=""><figcaption></figcaption></figure>

### Set Form Permissions

Set up the Permissions on the form to allow Employee Users to submit the form and Manager Users to read and update all submissions. &#x20;

1. Open the **Expense** **Report** form
2. Click the **Access** tab for the form
3. **Add** the following **Submission Data Permissions**\
   **Create Own**: Authenticated (Role assigned to the Employee Users) - Allows Employee Users to submit the form\
   **Read All:** Manager - Allows Manager Users to view (read) all form submissions\
   **Update All**: Manager - Allows Manager Users to update all form submissions&#x20;
4. **Remove** the following **Form Definition Access permissions**\
   **Read Form Definition**: Anonymous - Removing this permission will prompt the User to log in before viewing the form.
5. **Save** the settings

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FZRHGzBcBxBkYThDjSjtt%2FPermissions.jpg?alt=media&#x26;token=55f02ab5-138d-4a2f-b851-03df85ecd239" alt=""><figcaption></figcaption></figure>

### Create Email Action

The Email Action will fire off an email to the Manager whenever the form is submitted. This email will contain the SSO Token required to authenticate the Manager into the application, allowing the Manager to review the Expense Request.

[**Click Here**](https://help.form.io/developers/auth/email-login) to learn more about how SSO Tokens work

{% hint style="info" %}
In order for the Email action to function, an Email Transport must be configured within your project.&#x20;

[**Click Here**](https://help.form.io/developers/integrations/email-integrations) for information on integrating an Email provider.
{% endhint %}

1. Within the Expense Report Form, click the **Action** tab
2. Select **Email** from the action dropdown and click **+Add an action**
3. Select the **Email Transport**
4. Add the [**Manager**](#user-content-fn-1)[^1] email address to the **To: Email Address** field\
   E.G. <manager@example.com>
5. Modify the **Message** field to include an **SSO** **Token** that will authenticate the Manager

`https://pro.formview.io/?token=[[token(data.email=manager)]]#/project-domain/expensereport/submission/{{ id }}/edit`&#x20;

***

Here's a summary of how the SSO Token works:

> `https://pro.formview.io/`

The Application domain the SSO token will authenticate the user into. In this example, we will be using the  [**FormView Pro Application**](https://help.form.io/userguide/formview) to test out the workflow.&#x20;

`token=[[token(data.`**`email`**`=`**`manager`**`)]]`

The token will then search within the **Manager** resource and try to find a record that matches the **Email** **data** within the given Resource. If a match is found, a special JWT token will be generated.

`/project-domain/expensereport/submission/`

This is the [**Form.io project domain**](#user-content-fn-2)[^2], and the [**submission** **endpoint**](#user-content-fn-3)[^3] of the [**Expense Report**](#user-content-fn-4)[^4] form the token will be authenticating the user into.&#x20;

{% hint style="warning" %}
In order for the SSO token to function, you will need to modify the example URL to include your **own** Form.io project domain and ensure the expense report form endpoint is correct.
{% endhint %}

`{{ id }}/edit`

The  **Submission ID** the SSO token authenticates the user into. The user will be viewing the submission in Edit mode when the SSO token is clicked.&#x20;

***

You can also use HTML classes and the integrated [**Bootstrap**](https://getbootstrap.com/docs/5.3/getting-started/introduction/) library to customize the SSO link. Here’s an example of the SSO Token link within a button block:

```
<center><a class="btn btn-primary btn-block" href="https://pro.formview.io/?token=[[token(data.email=manager)]]#/project-domain/expensereport/submission/{{ id }}/edit">Review Expense Report</a></center>
```

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F5NbktoikxratTNfCvEIe%2Femailmessage.jpg?alt=media&#x26;token=5a63ccef-2824-46b8-9755-b1a94ff81c8f" alt=""><figcaption></figcaption></figure>

### Workflow Testing

With the SSO token in place, the next step is to test out the SSO workflow. The FormView Pro application will be used to help facilitate the workflow inside an application environment.&#x20;

{% hint style="info" %}
FormView Pro is an application integrated with the Form.io Project. It serves as a way for end users to consume and submit forms built and published within the Form.io platform.&#x20;

[**Click Here** ](https://help.form.io/developer-tool-ecosystem/form-view-pro)to learn more
{% endhint %}

**User Submission**

Submit the Expense Form as an Employee user to trigger the Email Action containing the Manager SSO Token.

1. Navigate to the **Expense Report** form
2. Click the **Launch** tab
3. Click the **Go To Form** button to launch the form inside the application
4. **Login** using the User credentials submitted \
   E.G. <user@example.com> / abc123
5. **Submit** the form

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F32zDwZMa5PlZV6VwfljQ%2Fuserlogin.jpg?alt=media&#x26;token=243f4e0e-334c-48e3-ae79-361ca6a751df" alt=""><figcaption></figcaption></figure>

**Manager Review**

At this point, the email action should be triggered containing the SSO Token for the Manager.

1. Check the **email** inbox for the **Manager**&#x20;

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FlFGLxnJ2wv00poMop9Wl%2Fmanageremail.jpg?alt=media&#x26;token=311bd66f-69f6-4b6b-9d81-34d4449efb86" alt="" width="469"><figcaption></figcaption></figure>

2. Click the **SSO Link** to authenticate as the Manager and review the submission

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FFuZggAo5u1QjrK9wijVE%2Fmanagerexpense.jpg?alt=media&#x26;token=6057d1b4-81ef-490c-8ad8-9146d5f6e62c" alt="" width="563"><figcaption></figcaption></figure>

SubmissionThe SSO Token will authenticate the Manager user to view and edit the Expense Report submission

[^1]: Email address submitted against the Manager resource

[^2]: The project endpoint which can be found at the top of the Project below the title

[^3]: The submission endpoint of the form set as submission within the URL&#x20;

[^4]: The Expense Report form API endpoint which can be found in the embed tab of the Form
