Okta and Box Platform demo

This sample will show integration between Okta and Box platform and app users. The sample will allow you to register a user in Okta and this will automatically create a mapped app user in Box to allow interaction with Box content in a Box UI Element.

See the below diagrams for details

Registration flow

Login flow

Pre-requisites

You will need both a Okta free developer account and a Box account

• Free Okta Dev account: https://developer.okta.com/signup/
• Free Box Developer account: https://account.box.com/signup/developer

Okta setup

1. Login to the Okta console and go to Applications-> Create App Integration
2. Choose 'OIDC - OpenID Connect' as sign method and 'Web application' as application type
3. Give your application a meaningful name
4. Tick all the grant type boxes

5. URLS

• Sign-in URIs: http://localhost:3000/, http://localhost:3000/authorization-code/callback, http://localhost:3000/?signout=true
• Initiate login URI: - http://localhost:3000/authorization-code/callback

6. Go to 'Directory' -> 'Profile editor' and find the profile for your app and add new string attribute

• Display Name=BoxId
• Variable Name=boxId

Box

1. Create a new JWT Application https://developer.box.com/guides/authentication/jwt/jwt-setup/

• App access level: App access only
• Application scopes: Read, Write, Manage users, Manage groups
• Advanced features: Generate user access tokens
• CORS Domains: http://localhost:3000

2. Download the json file with the private key This will be downloaded as json file with 12 lines. Remove all line ending to make it a single line

   From

   

   To

   

Setup and run the app

1. Clone this repository and create an '.env' file in the root and add the following key/value pair

• OKTA_TENANT=..from the General page of your Okta app (Okta domain)
• OKTA_API_KEY=..In Okta, go to Security->API->Tokens, Create token and copy here
• OKTA_CLIENT_ID=..from the General page of your Okta app
• OKTA_CLIENT_SECRET=..from the General page of your Okta app
• OKTA_REDIRECT_URI=http://localhost:3000
• OKTA_LOGO=..URL to a logo you want to use for your login dialog
• BOX_JWT=..jwt json config in a single line

2. Install dependencies

   npm install

3. Run the app

   npm start

   This should bring up this website on localhost:3000

   

   You can go through the registration process

   

   This will send an email with instructions on account activation (this part can be configured in your Okta app) and then you can login

   

   Once logged in you can see user info

And create a folder as the registered app user

License

The MIT License (MIT)

Copyright (c) 2021 Peter Christensen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.