isabella232 / okta-secure-vue-aws-client-example

A Secure Vue.js App, Deployed to AWS

A Secure Vue.js App, Deployed to AWS

This example app shows how to build a Vue.js app, deploy it to AWS, add CloudFront as a CDN, and deploy an Express API to AWS Lambda.

Please read Deploy Your Secure Vue.js App to AWS to see how this app was created.

Prerequisites: Node.js.

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage, and secure users and roles in any application.

• Getting Started
• Links
• Help
• License

Getting Started

To install this example application, run the following commands:

git clone https://github.com/oktadeveloper/okta-secure-vue-aws-client-example.git vue-aws-client
cd vue-aws-client

This will get a copy of the project installed locally. To install all of its dependencies and start the app, run the commands below.

npm install
npm run dev

You will also need to get the server example app if you want to verify API communication works.

git clone https://github.com/oktadeveloper/okta-secure-vue-aws-server-example.git vue-aws-server
cd vue-aws-server
npm install

Setup Okta

To use Okta, you'll need to change a few things. First, you'll need to create a free developer account at https://developer.okta.com/signup/. After doing so, you'll get your own Okta domain, that has a name like https://dev-123456.oktapreview.com.

Create an OIDC App in Okta to get a {clientId} and {clientSecret}. To do this, log in to your Okta Developer account and navigate to Applications > Add Application. Click Single-Page App and click the Next button. Give the app a name you’ll remember, specify http://localhost:8080 as a Base URI, and http://localhost:8080/implicit/callback as a Login Redirect URI. Click Done and copy the client ID and secret into the files listed below.

TIP: You'll need to add a Login Redirect URI that matches your CloudFront URI after you've set that up. If you follow the steps in this example's blog post, you'll have this information before you create your app in Okta.

Modify vue-aws-client/src/router/index.js to use your Okta settings.

Vue.use(Auth, {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  client_id: '{clientId}',
  redirect_uri: window.location.origin + '/implicit/callback',
  scope: 'openid profile email'
})

Modify vue-aws-server/app.js too:

const oktaJwtVerifier = new OktaJwtVerifier({
  clientId: '{clientId}',
  issuer: 'https://{yourOktaDomain}/oauth2/default'
})

Links

This example uses the following open source libraries provided by Okta:

• Okta Vue SDK
• Okta JWT Verifier for Node.js

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums. You can also email [email protected] if would like to create a support ticket.

License

Apache 2.0, see LICENSE.