
JavaScript Sample Project
174 | 175 |176 | This is a sample application that demonstrates an authentication 177 | flow for an SPA, using plain JavaScript 178 |
179 |
269 |
270 | ├── .circleci └── config.yml ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── Bug Report.yml │ ├── Feature Request.yml │ └── config.yml ├── dependabot.yml ├── stale.yml └── workflows │ └── semgrep.yml ├── .gitignore ├── 01-Login ├── .dockerignore ├── .gitignore ├── .prettierrc.yaml ├── Dockerfile ├── README.md ├── auth_config.json.example ├── bin │ └── www ├── exec.ps1 ├── exec.sh ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── css │ │ └── main.css │ ├── images │ │ └── logo.png │ └── js │ │ ├── app.js │ │ └── ui.js └── server.js ├── 02-Calling-an-API ├── .dockerignore ├── .gitignore ├── .prettierrc.yaml ├── Dockerfile ├── README.md ├── auth_config.json.example ├── bin │ └── www ├── exec.ps1 ├── exec.sh ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── css │ │ └── main.css │ ├── images │ │ └── logo.png │ └── js │ │ ├── app.js │ │ └── ui.js └── server.js ├── LICENSE ├── README.md └── netlify.toml /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Environment variables to be defined in the build configuration: 2 | # AUTH0_TEST_CLIENT_ID = Client id to use in test 3 | # AUTH0_TEST_DOMAIN = Domain to use in test 4 | # AUTH0_TEST_AUDIENCE = API Audience to use in test 5 | 6 | # Common logic 7 | defaults: &defaults 8 | steps: 9 | - attach_workspace: 10 | at: ~/ 11 | - run: 12 | name: Replace Auth0 test credentials 13 | command: | 14 | echo "{ \"domain\": \"$AUTH0_TEST_DOMAIN\", \"clientId\": \"$AUTH0_TEST_CLIENT_ID\", \"audience\": \"$AUTH0_TEST_API_IDENTIFIER\" }" > $AUTH0_CFG 15 | 16 | - run: 17 | name: Build pull request 18 | command: | 19 | docker build -t $CIRCLE_JOB ./$SAMPLE_PATH 20 | docker run -d -p 3000:3000 --name $CIRCLE_SHA1 $CIRCLE_JOB 21 | - run: 22 | name: Wait for app to be available 23 | command: | 24 | sleep 10 25 | docker run --network host --rm appropriate/curl --retry 8 --retry-connrefused -v localhost:3000 26 | - run: 27 | name: Run tests 28 | command: | 29 | docker create --network host --name tester codeceptjs/codeceptjs codeceptjs run-multiple --all --steps --verbose 30 | docker cp $(pwd)/lock_login_spa_test.js tester:/tests/lock_login_test.js 31 | docker cp $(pwd)/codecept.conf.js tester:/tests/codecept.conf.js 32 | docker start -i tester 33 | working_directory: scripts 34 | - run: 35 | name: Copy app container logs 36 | command: | 37 | mkdir -p /tmp/out 38 | docker logs $CIRCLE_SHA1 > /tmp/out/app_logs.log 39 | docker cp tester:/tests/out /tmp/ 40 | when: on_fail 41 | - store_artifacts: 42 | path: /tmp/out 43 | 44 | # Jobs and Workflows 45 | version: 2 46 | jobs: 47 | checkout: 48 | machine: true 49 | steps: 50 | - checkout 51 | - run: git clone https://github.com/auth0-samples/spa-quickstarts-tests scripts 52 | - persist_to_workspace: 53 | root: ~/ 54 | paths: 55 | - project 56 | - scripts 57 | 01-login: 58 | machine: true 59 | environment: 60 | - AUTH0_CFG: 01-Login/auth_config.json 61 | - SAMPLE_PATH: 01-Login 62 | <<: *defaults 63 | 64 | 02-calling-an-api: 65 | machine: true 66 | environment: 67 | - AUTH0_CFG: 02-Calling-an-API/auth_config.json 68 | - SAMPLE_PATH: 02-Calling-an-API 69 | <<: *defaults 70 | 71 | workflows: 72 | version: 2 73 | quickstarts_login: 74 | jobs: 75 | - checkout: 76 | context: Quickstart SPA Test 77 | - 01-login: 78 | context: Quickstart SPA Test 79 | requires: 80 | - checkout 81 | - 02-calling-an-api: 82 | context: Quickstart SPA Test 83 | requires: 84 | - checkout 85 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @auth0-samples/dx-sdks-engineer 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Bug Report.yml: -------------------------------------------------------------------------------- 1 | name: 🐞 Report a bug 2 | description: Have you found a bug or issue? Create a bug report for this sample 3 | 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | **Please do not report security vulnerabilities here**. The [Responsible Disclosure Program](https://auth0.com/responsible-disclosure-policy) details the procedure for disclosing security issues. 9 | 10 | - type: checkboxes 11 | id: checklist 12 | attributes: 13 | label: Checklist 14 | options: 15 | - label: I have looked into the Readme ([Login](https://github.com/auth0-samples/auth0-javascript-samples/tree/master/01-Login#readme)/[Calling an API](https://github.com/auth0-samples/auth0-javascript-samples/tree/master/02-Calling-an-API#readme)) and have not found a suitable solution or answer. 16 | required: true 17 | - label: I have searched the [issues](https://github.com/auth0-samples/auth0-javascript-samples/issues) and have not found a suitable solution or answer. 18 | required: true 19 | - label: I have searched the [Auth0 Community](https://community.auth0.com) forums and have not found a suitable solution or answer. 20 | required: true 21 | - label: I agree to the terms within the [Auth0 Code of Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md). 22 | required: true 23 | 24 | - type: textarea 25 | id: description 26 | attributes: 27 | label: Description 28 | description: Provide a clear and concise description of the issue, including what you expected to happen. 29 | validations: 30 | required: true 31 | 32 | - type: textarea 33 | id: reproduction 34 | attributes: 35 | label: Reproduction 36 | description: Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent. 37 | placeholder: | 38 | 1. Step 1... 39 | 2. Step 2... 40 | 3. ... 41 | validations: 42 | required: true 43 | 44 | - type: textarea 45 | id: additional-context 46 | attributes: 47 | label: Additional context 48 | description: Any other relevant information you think would be useful. 49 | validations: 50 | required: false 51 | 52 | - type: dropdown 53 | id: environment-sample 54 | attributes: 55 | label: Sample 56 | multiple: false 57 | options: 58 | - Login 59 | - Calling an API 60 | validations: 61 | required: true 62 | 63 | - type: dropdown 64 | id: environment-browser 65 | attributes: 66 | label: Which browsers have you tested in? 67 | multiple: true 68 | options: 69 | - Chrome 70 | - Edge 71 | - Safari 72 | - Firefox 73 | - Opera 74 | - Other 75 | validations: 76 | required: true 77 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Feature Request.yml: -------------------------------------------------------------------------------- 1 | name: 🧩 Feature request 2 | description: Suggest an idea or a feature for this sample 3 | labels: ["feature request"] 4 | 5 | body: 6 | - type: checkboxes 7 | id: checklist 8 | attributes: 9 | label: Checklist 10 | options: 11 | - label: I have looked into the Readme ([Login](https://github.com/auth0-samples/auth0-javascript-samples/tree/master/01-Login#readme)/[Calling an API](https://github.com/auth0-samples/auth0-javascript-samples/tree/master/02-Calling-an-API#readme)) and have not found a suitable solution or answer. 12 | required: true 13 | - label: I have searched the [issues](https://github.com/auth0-samples/auth0-javascript-samples/issues) and have not found a suitable solution or answer. 14 | required: true 15 | - label: I have searched the [Auth0 Community](https://community.auth0.com) forums and have not found a suitable solution or answer. 16 | required: true 17 | - label: I agree to the terms within the [Auth0 Code of Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md). 18 | required: true 19 | 20 | - type: textarea 21 | id: description 22 | attributes: 23 | label: Describe the problem you'd like to have solved 24 | description: A clear and concise description of what the problem is. 25 | validations: 26 | required: true 27 | 28 | - type: textarea 29 | id: ideal-solution 30 | attributes: 31 | label: Describe the ideal solution 32 | description: A clear and concise description of what you want to happen. 33 | validations: 34 | required: true 35 | 36 | - type: textarea 37 | id: alternatives-and-workarounds 38 | attributes: 39 | label: Alternatives and current workarounds 40 | description: A clear and concise description of any alternatives you've considered or any workarounds that are currently in place. 41 | validations: 42 | required: false 43 | 44 | - type: textarea 45 | id: additional-context 46 | attributes: 47 | label: Additional context 48 | description: Add any other context or screenshots about the feature request here. 49 | validations: 50 | required: false 51 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 🤔 Help & Questions 4 | url: https://community.auth0.com 5 | about: Ask general support or usage questions in the Auth0 Community forums. 6 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | 4 | - package-ecosystem: "npm" 5 | directory: "/01-Login" 6 | schedule: 7 | interval: "daily" 8 | ignore: 9 | - dependency-name: "*" 10 | update-types: ["version-update:semver-major", "version-update:semver-patch"] 11 | 12 | - package-ecosystem: "npm" 13 | directory: "/02-Calling-an-API" 14 | schedule: 15 | interval: "daily" 16 | ignore: 17 | - dependency-name: "*" 18 | update-types: ["version-update:semver-major", "version-update:semver-patch"] 19 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Configuration for probot-stale - https://github.com/probot/stale 2 | 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale 4 | daysUntilStale: 90 5 | 6 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed. 7 | daysUntilClose: 7 8 | 9 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable 10 | exemptLabels: [] 11 | 12 | # Set to true to ignore issues with an assignee (defaults to false) 13 | exemptAssignees: true 14 | 15 | # Label to use when marking as stale 16 | staleLabel: closed:stale 17 | 18 | # Comment to post when marking as stale. Set to `false` to disable 19 | markComment: > 20 | This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇♂️ -------------------------------------------------------------------------------- /.github/workflows/semgrep.yml: -------------------------------------------------------------------------------- 1 | name: Semgrep 2 | 3 | on: 4 | pull_request: {} 5 | 6 | push: 7 | branches: ["master", "main"] 8 | 9 | schedule: 10 | - cron: '30 0 1,15 * *' 11 | 12 | jobs: 13 | semgrep: 14 | name: Scan 15 | runs-on: ubuntu-latest 16 | container: 17 | image: returntocorp/semgrep 18 | # Skip any PR created by dependabot to avoid permission issues 19 | if: (github.actor != 'dependabot[bot]') 20 | steps: 21 | - uses: actions/checkout@v3 22 | 23 | - run: semgrep ci 24 | env: 25 | SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }} 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | .DS_Store -------------------------------------------------------------------------------- /01-Login/.dockerignore: -------------------------------------------------------------------------------- 1 | .git 2 | .gitignore 3 | README.md -------------------------------------------------------------------------------- /01-Login/.gitignore: -------------------------------------------------------------------------------- 1 | a0-variables.js 2 | auth_config.json 3 | node_modules/ -------------------------------------------------------------------------------- /01-Login/.prettierrc.yaml: -------------------------------------------------------------------------------- 1 | semi: true 2 | arrowParens: always 3 | -------------------------------------------------------------------------------- /01-Login/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:10-alpine 2 | 3 | RUN mkdir /app 4 | 5 | WORKDIR /app 6 | 7 | COPY package.json . 8 | 9 | RUN npm install --production 10 | 11 | COPY . . 12 | 13 | EXPOSE 3000 14 | 15 | CMD ["node", "bin/www"] -------------------------------------------------------------------------------- /01-Login/README.md: -------------------------------------------------------------------------------- 1 | # Sample 01 - Login 2 | 3 | The purpose of this article is to demonstrate how simple it is to set up and use the new Single Page Application SDK, and authenticate a user in your application using Auth0's Universal Login Page. 4 | 5 | ## Running the Sample Application 6 | 7 | The sample can be run locally, by cloning the repository to your machine and then following the steps below. 8 | 9 | ### Specifying Auth0 Credentials 10 | 11 | To specify the application client ID and domain, make a copy of `auth_config.json.example` and rename it to `auth_config.json`. Then open it in a text editor and supply the values for your application: 12 | 13 | ```json 14 | { 15 | "domain": "{DOMAIN}", 16 | "clientId": "{CLIENT_ID}" 17 | } 18 | ``` 19 | 20 | ### Installation 21 | 22 | After cloning the repository, run: 23 | 24 | ```bash 25 | $ npm install 26 | ``` 27 | 28 | This will install all of the necessary packages in order for the sample to run. 29 | 30 | ### Running the Application 31 | 32 | This version of the application uses an [Express](https://expressjs.com) server that can serve the site from a single page. To start the app from the terminal, run: 33 | 34 | ```bash 35 | $ npm run dev 36 | ``` 37 | 38 | ## Frequently Asked Questions 39 | 40 | We are compiling a list of questions and answers regarding the new JavaScript SDK - if you're having issues running the sample applications, [check the FAQ](https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md)! 41 | 42 | ## What is Auth0? 43 | 44 | Auth0 helps you to: 45 | 46 | - Add authentication with [multiple authentication sources](https://docs.auth0.com/identityproviders), either social like **Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, among others**, or enterprise identity systems like **Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider**. 47 | - Add authentication through more traditional **[username/password databases](https://docs.auth0.com/mysql-connection-tutorial)**. 48 | - Add support for **[linking different user accounts](https://docs.auth0.com/link-accounts)** with the same user. 49 | - Support for generating signed [Json Web Tokens](https://docs.auth0.com/jwt) to call your APIs and **flow the user identity** securely. 50 | - Analytics of how, when and where users are logging in. 51 | - Pull data from other sources and add it to the user profile, through [JavaScript rules](https://docs.auth0.com/rules). 52 | 53 | ## Create a free Auth0 account 54 | 55 | 1. Go to [Auth0](https://auth0.com/signup) and click Sign Up. 56 | 2. Use Google, GitHub or Microsoft Account to login. 57 | 58 | ## Issue Reporting 59 | 60 | If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues. 61 | 62 | ## Author 63 | 64 | [Auth0](auth0.com) 65 | 66 | ## License 67 | 68 | This project is licensed under the MIT license. See the [LICENSE](LICENSE.txt) file for more info. 69 | -------------------------------------------------------------------------------- /01-Login/auth_config.json.example: -------------------------------------------------------------------------------- 1 | { 2 | "domain": "{DOMAIN}", 3 | "clientId": "{CLIENT_ID}" 4 | } -------------------------------------------------------------------------------- /01-Login/bin/www: -------------------------------------------------------------------------------- 1 | const app = require('../server'); 2 | const port = process.env.PORT || 3000; 3 | 4 | app.listen(port, () => console.log(`Server running on port ${port}`)); -------------------------------------------------------------------------------- /01-Login/exec.ps1: -------------------------------------------------------------------------------- 1 | docker build --rm -t auth0-javascript-sample-01-login . 2 | docker run -p 3000:3000 -it auth0-javascript-sample-01-login 3 | -------------------------------------------------------------------------------- /01-Login/exec.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | docker build -t auth0-javascript-sample-01-login . 3 | docker run --init -p 3000:3000 -it auth0-javascript-sample-01-login -------------------------------------------------------------------------------- /01-Login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |176 | This is a sample application that demonstrates an authentication 177 | flow for an SPA, using plain JavaScript 178 |
179 |
269 |
270 | 183 | This is a sample application that demonstrates an authentication 184 | flow for an SPA, using plain JavaScript 185 |
186 |
276 |
277 | 284 | Ping an external API by clicking the button below. This will call 285 | the external API using an access token, and the API will validate it 286 | using the API's audience value. 287 |
288 | 289 |290 | Ping API 291 |
292 | 293 |
297 | JSON.stringify(apiMessage, null, 2)
298 |
299 |