This is a basic sample app created using Vue.js to showcase the JWT tokens thats an Identity Provider returns mainly using the Implicit Grant flow. Token data has been decoded and prettified for readability.
The project uses Vue.js. It scripts are written with Typescript. You can find out how Vue works with Typescript here.
Vue CLI Service is used to compile and serve the page locally.
Note: This app does not support sessions, so there is no data persistence.
- src/components - Vue.js components
- src/services - Services supporting user interactivities
- src/router.ts - Vue Router for mapping components
- Clone the repo
- Run
npm installoryarn install. - To compile and serve:
npm startoryarn run start.
You will need to provision a client id from your identity provider of choice and configure the sign in and sign out URL (and any additional parameters that the service might need).
Please refer to the corresponding guide for the managed service.
The following environment variables are needed by the OIDC client in order to sign in to the identity provider (IdP).
In order to run the service locally, you will need to create a .env.local file and provide VUE_APP_PROVIDER and VUE_APP_CLIENT_ID env vars. They should not be committed into the repository.
| Environment Variable Name | Value | Location |
|---|---|---|
| VUE_APP_SIGN_IN_REDIRECT_URI | URL for the IdP to redirect to after successful sign in | .env |
| VUE_APP_SIGN_OUT_REDIRECT_URI | URL for the IdP to redirect to after successful sign out | .env |
| VUE_APP_PROVIDER | URL to the IdP (i.e. https://login.microsoftonline.com/common/v2.0/) | .env.local |
| VUE_APP_CLIENT_ID | ID string of the client application that you have registered with the IdP | .env.local |
- v0.1.0
- Initial commit
- v0.2.0
- Remove dependency on Cognito and move to generic OIDC client.
- Migrate code base to Typescript.
We welcome your involvement, be it fixing bugs or implementing new features that you find relevant to this library.
To contribute, you may follow the steps below:
- Fork the repo
- Create a new branch from development to work on your contribution
- Create a pull request back when you are done
- Please refer to the ISSUES and PULL REQUEST templates when raising them. The reviewers will evaluate the request before merging into master
You can raise an issue within this Github repository to kick-start the discussion first.
Licensed under the MIT LICENSE
Huge thank you to the almighty Google, StackOverflow and these tutorial articles and repo that was used to develop this application:
- Integrating Amazon Cognito With Single Page Application (Vue.js) by Mohamed Sanaulla
- RealWorld Example App - Codebase to demonstrate a fully fledged fullstack application built with Vue.js including CRUD operations, authentication, routing, pagination, and more.
- JWT.IO - Decode, verify and generate JWT.
- NPM vs Yarn Cheat Sheet - Cheatsheet for yarn - npm equivalents.