Skip to content
A Secure Vue.js App, Deployed to AWS
Branch: master
Clone or download
Pull request Compare This branch is 2 commits ahead of modernup:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config
src
static
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
LICENSE
README.md
index.html
package-lock.json
package.json
yarn.lock

README.md

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

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:

Help

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

License

Apache 2.0, see LICENSE.

You can’t perform that action at this time.