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.
- Clone this repo and navigate to the new
okta-signin-widgetfolder.
[path]$ git clone [email protected]:okta/okta-signin-widget.git && cd okta-signin-widget- Install Bundler if you don't already have it.
[path/okta-signin-widget]$ gem install bundler- Install our Ruby dependencies.
[path/okta-signin-widget]$ bundle install- Install our Node dependencies.
[path/okta-signin-widget]$ npm install- Create a
.widgetrcfile in theokta-signin-widget/directory. Add a base URL entry in.widgetrc.
{
"widgetOptions": {
"baseUrl": "https://your-org.okta.com"
}
}- 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- 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 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 |
| 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 |