gregorydandrea-okta/okta-signin-widget

Okta SignIn widget that renders the new login/auth/recovery flows

Okta Sign-In Widget

The Okta Sign-In Widget is a JavaScript widget from Okta that gives you a fully featured and customizable login experience which can be used to authenticate users on any web site.

If you want to use the widget, see the instructions on the Okta Sign-In Widget developer page.

If you want to modify the widget, use the following instructions.

Building the widget

1. Clone this repo and navigate to the new okta-signin-widget folder.

[path]$ git clone [email protected]:okta/okta-signin-widget.git && cd okta-signin-widget

2. Install Bundler if you don't already have it.

[path/okta-signin-widget]$ gem install bundler

3. Install our Ruby dependencies.

[path/okta-signin-widget]$ bundle install

4. Install our Node dependencies.

[path/okta-signin-widget]$ npm install

5. Create a .widgetrc file in the okta-signin-widget/ directory. Add a base URL entry in .widgetrc.

  {
    "widgetOptions": {
      "baseUrl": "https://your-org.okta.com"
    }
  }

6. Build the widget, start a local connect server that hosts it, and launch a browser window with the widget running.

[path/okta-signin-widget]$ npm start

7. Finally, enable CORS support for our new server by following these instructions. You can now authenticate to Okta using your very own, customizable widget!

The .widgetrc config file

The .widgetrc file is a configuration file that saves your local widget settings.

Property	Description
widgetOptions	Options that are passed to the widget on initialization - reference the developer docs to see a complete list of configurable features.
serverPort	The port the local server runs on. Defaults to 1804

Build and test commmands

Command	Description
npm start	Build the widget, start the server, and open a browser window with the widget loaded
npm run build:dev	Build an unminified version of the widget
npm run build:prod	Build a minified, uglified version of the widget
npm test	Run unit tests
npm run lint	Run jshint and scss linting tests