How To: Add a Login Page to your Authenticated Project | Documentation

This example steps through how to add a login page to your Authenticated project.

Use Case

One of the reasons that you may start working with teams is to create Authenticated projects.

Once you create a team in Epicenter, you can create not just Public projects (accessible to anyone) and Private projects (accessible just to you), but also Authenticated projects.

An Authenticated project is accessible only by end users that you and your team members create and organize into groups specific to each team project. These end users can play with the project through the interface you create, but do not have project authoring privileges.

End users need to be logged in order to access Authenticated projects. For example, if you put a login page at index.html, anyone who accesses forio.com/app/{your team id}/{your project id}/ is required to log in before they can continue. This example steps through how to add a login page to your Authenticated project.

What You Need

A team subscription (more information)
A team project (more information)
An access for your team project of Authenticated (more information)
One or more groups for your team project (more information)
End users for each group (more information)
The Login Component provided as part of Epicenter.js (details below)

Solution Outline

Copy the Login Component from Epicenter.js into your team project.
Customize the Login Component index.html page for your project.

Solution Implementation

Copy the Login Component from Epicenter.js into your team project.

The login component is a set of files available from GitHub. Copy all of the files and upload them to the Interface folder of your project.
Customize the Login Component index.html page for your project.

Follow the comments provided within the index.html file to customize it as needed for your project. For example, change the action of the form to direct end users to the first page of your simulation.

More information about the login component is available on the Epicenter.js overview page, or in the components README file in GitHub.