Code Monkey home page Code Monkey logo

auth0-javascript-samples's Introduction

Auth0 JavaScript Samples

This repository holds the quickstart samples using auth0-spa-js.

Read the full tutorials on Auth0.com.

CircleCI

Index

List of available quickstarts

What is Auth0?

Auth0 helps you to:

  • Add authentication with multiple authentication sources, 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.
  • Add authentication through more traditional username/password databases.
  • Add support for linking different user accounts with the same user.
  • Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
  • Analytics of how, when and where users are logging in.
  • Pull data from other sources and add it to the user profile, through JavaScript rules.

Create a free Auth0 account

  1. Go to Auth0 and click Sign Up.
  2. Use Google, GitHub or Microsoft Account to login.

Issue Reporting

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 details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.

auth0-javascript-samples's People

Contributors

aaguiarz avatar adamjmcgrath avatar albertoperdomo avatar alexisluque avatar camiblanch avatar chenkie avatar davidpatrick avatar dependabot[bot] avatar evansims avatar frederikprijck avatar heikeraraujo avatar jimmyjames avatar jmangelo avatar joshcanhelp avatar lbalmaceda avatar luisrudge avatar paulioceano avatar rafanog avatar snyk-bot avatar tiwasaki-auth0 avatar vicsant avatar vicsant94 avatar vmartynets avatar widcket avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

auth0-javascript-samples's Issues

Unexpected behavior in 04-Authorization project sample

When the application is started the "Admin" button is displayed without the user having logged in.
Project: 04-Authentication

image

When you click "Admin" button and then click the "Post a Message" button, then the following shows up on the screen:

image

When a user logged in, the Admin button hides

image

Sample 05-token-renewal: HTTP error 400

Login works fine, but when clicking the Renew button, I get error code 400 (Failed to load resource: the server responded with a status of 400 ()). The response contains a HTML error page. I followed the README.md to the letter and changed nothing to the project (except for the auth.-variables.js).

AssertionError [ERR_ASSERTION]: You must provide a 'tokenSigningAlg' for validating symmetric algorithms

AssertionError [ERR_ASSERTION]: You must provide a 'tokenSigningAlg' for validating symmetric algorithms
at jwtVerifier (C:\Users\rasingh\Music\CODE MAZE\nodejs-01-authorization\01-authorization-rs256\node_modules\express-oauth2-jwt-bearer\dist\index.js:235:12)
at auth (C:\Users\rasingh\Music\CODE MAZE\nodejs-01-authorization\01-authorization-rs256\node_modules\express-oauth2-jwt-bearer\dist\index.js:350:23)
at Object. (C:\Users\rasingh\Music\CODE MAZE\nodejs-01-authorization\01-authorization-rs256\server.js:17:18)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {

Lock version outdated on index.html

The lock version referenced in the index.html file of the following samples is outdated:

  • 01-Basic-Login
  • 03-User-Profile
  • 04-Calling-API
  • 05-Authorization

As shown on the following picture, the version currently referenced is V10.11, but latest release is V10.14:
lock outdated

Ticket: AUTH-3813

Log out issue on example 1

When I hit the 'Log Out' button on the nav bar when I was on the profile page, this is what happened:

image

I'm assuming there is an issue with the log out command not actually redirecting the site to the home page, but I can't tell because nothing was logged to the console.

Failed Sign Up using email and password

Project: 02-Custom-Login-Form
When a new user tries to register using their email and password
signup

The result is: Oops!, something went wrong
oops

Logs shows the following information.
Type: Failed Login
Description: Password login is disabled for clients using externally hosted login pages with oidc_conformant flag set.
logs

Missing leeway parameter in the app.js

The projects 01-Login and 02-User-Profile has not the parameter "leeway" in the webAuth instantiation.
File app.js

image

This causes the following error when trying to log in:

image

Information displayed in the browser console:

image

Outdated dependencies (express & express-jwt)

03-Calling-an-API sample project is using outdated dependencies of the libraries:
"express": "^4.14.0" -> latest version: 4.15.3
"express-jwt": "^5.1.0" -> latest version: 5.3.0

image

Lock shows an incorrect message when user set a wrong email or password.

When a user with wrong email or password tries to login, this shows: "WE'RE" When a user with a wrong email or password tries to login, Lock shows: "WE'RE SORRY, SOMETHING WENT WRONG WHEN ATTEMPTING LOG IN"
Project: 01-Embedded login using Lock version 10.16
The correct message should be:
"WRONG EMAIL OR PASSWORD"
incorrectmessagelock
Logs shows the error type below: "Failed Login (invalid email/username)"

Using Safari 13.0.2 after page refresh isAuthenticated() always appears to return false

Using 01_Login and running as the instructions say I successfully login and I can view profile etc.

On Safari 13.0.2:
Refreshing the page causes me to be logged out.
On Chrome:
I remain logged in.

It appears

const isAuthenticated = await auth0.isAuthenticated();

Is always returning false after refresh on Safari.

Tapping login - logs me in again without prompting.

What am I doing wrong? :)

npm WARN [email protected] No repository field

When trying to clone and run 01-Login example I see both install and execution errors wrt custom-login.

Step:
git clone https://github.com/auth0-samples/auth0-javascript-samples.git
cd auth0-javascript-samples/01-Login/
cp auth0-variables.js.example auth0-variables.js
vi auth0-variables.js <- Fix AUTH0_CLIENT_ID and AUTH0_DOMAIN
npm install
This step finishes with: npm WARN [email protected] No repository field
sudo ln -s /usr/bin/nodejs /usr/bin/node
Fix for legacy invocation of nodejs in scripts
npm start
This step fails with:

npm start

[email protected] start /home/ubuntu/auth0-javascript-samples/01-Login
serve -p 3000

/home/ubuntu/auth0-javascript-samples/01-Login/node_modules/serve/bin/serve.js:11
const { coroutine } = require('bluebird')
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3

npm ERR! Linux 4.4.0-1054-aws
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: serve -p 3000
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'serve -p 3000'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the custom-login package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! serve -p 3000
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs custom-login
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls custom-login
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/auth0-javascript-samples/01-Login/npm-debug.log

ubuntu@ip-172-31-57-212:~/auth0-javascript-samples/01-Login$ npm owner ls custom-login
npm ERR! owner ls Couldn't get owner data custom-login
npm ERR! Linux 4.4.0-1054-aws
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "owner" "ls" "custom-login"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/custom-login
npm ERR! 404
npm ERR! 404 'custom-login' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/auth0-javascript-samples/01-Login/npm-debug.log
npm-debug.log

Problem with social login

When using the social login option of the samples, there's no message shown that the login process was successful:

image

But the entry showing succesful login can be observed from the logs:
image

Ticket: AUTH-3813

Login state upon page reload if authenticated

Checklist

  • I have looked into the Readme (Login/Calling an API) and have not found a suitable solution or answer.
  • I have searched the issues and have not found a suitable solution or answer.
  • I have searched the Auth0 Community forums and have not found a suitable solution or answer.
  • I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

If I run the 01-LOGIN application and login, then reload the page, the GUI is in a non logged-in state. Once pressing the "Log in" button (qsLoginBtn), I am automatically logged in. I use the New Login Experience and Refresh Tokens as far as I can tell, have tried the suggestions in the FAQ.

I had a local "fix" for this since May 2023, using this sample application to quickly obtain my JWT in our test environment. But this "fix" stoped working this week, and I spent two days trying to figure out why. Still with no success.

I simply added an else statement calling the login() function for this code block in the window.onload hook:

  if (isAuthenticated) {
    console.log("> User is authenticated");
    window.history.replaceState({}, document.title, window.location.pathname);
    updateUI();
    return;
  }
  // New:
  else {
    login();
  }

Up until this week, this code has been working as I expected (if not actually authenticated, open login page, else login silently in the background). But no this change causes the page to go into a reload-loop, and I cannot figure out what changed. I have tried to lock down the SDK to an earlier version, to latest version, tested different browsers etc, all with the same result...

Describe the ideal solution

I think that doing a silent "login" if the user is indeed authenticated would be beneficial in many applications, and I suggest that this is added to the sample application

Alternatives and current workarounds

It would be very interesting to find out why my quick-fix, adding a login stopped working. I swear it worked a week ago! 🤯

Additional context

No response

invalid_token trying to log in

Project: 03-Calling-an-API

error: invalid_token
errorDescripcion: "The token was issued in the future. Please check your computed clock.

image

JavaScript exception in IE11

Facing issue in IE11
SCRIPT1002: Syntax error
app.js (7,35)

const login = async (targetUrl) => { try { console.log("Logging in", targetUrl);

not working async function.

03-Calling-an-API

Section Set the Audience and Scope in is in error:

Delete the first sentence in the paragraph below (as the API identifiers is already part of the auth0-variables.js file.

In your auth0.WebAuth instance, enter your API identifier as the value for audience. Add your scopes to the scope key.

Required increase of leeway parameter value

Required increase of leeway parameter value in all seeds projects.
Current value leeway: 30
Value with which it works leeway: 60

This causes the following error when trying to log in:

image

Error with the admin section

Even though that the text in the "admin" section of the sample says that you need to have the "write:messages" scopes to see it, but the user's still available to access without that scope

image

Documentation

auth_config.json
Remember to remove the curly braces around DOMAIN and CLIENT_ID, otherwise the Auth0 log in page will not load
In other words, your unique DOMAIN AND CLIENT_ID should only be surrounded in double quotes.

{
"domain": "{DOMAIN}",
"clientId": "{CLIENT_ID}"
}

Fails to login, javascript console shows "Error: Invalid algorithm", logs attached.

Logging in undefined
localhost/:1 Refused to apply style from 'http://localhost:3000/css/auth0-theme.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Navigated to http://localhost:3000/?code=qj5ENkN1lgy47nb1&state=UWg1ZUx1MUZIbGV6SWM3aFIuUVh5T29iLkJkc2tTZE11X1hxVjkzb3VMdw%3D%3D
localhost/:1 Refused to execute script from 'http://localhost:3000/js/auth0-theme.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
app.js:105 > User not authenticated
app.js:111 > Parsing redirect
app.js:121 Error parsing redirect: Error: Invalid algorithm
at ee (jwt.ts:65)
at oe._verifyIdToken (Auth0Client.ts:76)
at oe. (Auth0Client.ts:253)
at Generator.next ()
at a (tslib.es6.js:68)

Encourage users to use yarn instead of npm

I am using the latest npm & node and still get at slew of error messages on npm install, like:

npm ERR! path C:\work\aurelia-identity\auth0\javascript\03-Calling-an-API\node_modules\fast-json-stable-stringify\package.json.3900822674
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'C:\work\aurelia-identity\auth0\javascript\03-Calling-an-API\node_modules\fast-json-stable-stringify\package.json.3900822674' -> 'C:\work\aurelia-identity\auth0\javascript\03-Calling-an-API\node_modules\fast-json-stable-stringify\package.json'

These could be caused by running vscode, or some virus checkers and even sublime editor at the time of invoking npm install. I do not really believe that, as it ought to be a race condition in npm. By deleting node_modules folder and running yarn install, everything is fine.

λ yarn install
yarn install v1.5.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 9.04s.

Outdated auth0-js dependency

Outdated auth0-js dependency

Seeds projects are using an oudated version of the dependency auth0-js
Latest auth0-js version 8.8.0

image

mismatching_state: CSRF Warning! State not equal in request and response.

When i test with localhost settings I get the following error after callback received a GET request:
GET http://localhost:3000/callback?code=mKbAej-9voiiy7S3&state=bd97c12c065747d5a072ca4ad091d4d9

"mismatching_state: CSRF Warning! State not equal in request and response."

I tried to debug it, but I really do not understand it. The error seems to occur between
return auth0.authorize_redirect(redirect_uri=AUTH0_CALLBACK_URL, audience=AUTH0_AUDIENCE)
and

@app.route('/callback')
def callback_handling():
    auth0.authorize_access_token()

So there is not a lot of server.py code involved. The problem seems to occur on the auth0 side or at Authlib authorize_access_token().

As this is an example for auth0 usage in flask, help would be highly appreciated.

Thanks in advance

Sample 01-login crash

The sample 01-login, probably the oldest of all samples has a problem:

app.js:28 Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.<anonymous> (app.js:28)
(anonymous) @ app.js:28

The problem is that at the click on the Home button after that app is loaded, invokes the following code

 homeViewBtn.addEventListener('click', function() {
    homeView.style.display = 'inline-block';
    loginView.style.display = 'none';
  });

where the loginView is null - because it is not properly initialized, shown below:

image

This is the consequence of the fact that the entity 'login-view' does not exist.

P.S.
While one can say that this is a completely trivial issue, not worthy of a discussion, I disagree: the tutorial samples ought to be flawless 😄

Sample 05-token-renewal fails

After successful login, click on Renew Token button results with error message (on Chrome console):

 https://aurelia-identity.auth0.com/authorize?client_id=cxo2VDjr6kvQHEhWSJOxPyS2pK9Qxif9&response_type=token%20id_token&redirect_uri=http%3A%2F%2Flocalhost%3A3000&scope=openid%20profile&state=KKS5LuVlb5I-NADcH0lwKUk2bTwVtE70&nonce=4-oAoeRVcDjHFnIiZqS7VimOwQaoMR9R&response_mode=web_message&prompt=none&auth0Client=eyJuYW1lIjoiYXV0aDAuanMiLCJ2ZXJzaW9uIjoiOS40LjIifQ%3D%3D 400 (

The failure takes place in auth0.js, line 4595:

image

After a few seconds the following alert shows up

image

For a while I tried to trace this through auth0.js code but gave up eventually.

Can't logout

After wrecking my brain over what I could possibly be doing wrong, I decided to try out one of the demo apps and lo and behold, the Login app shows exactly the same incomprehensible behaviour.

Steps:

  • install en run app, click login
  • show dialog, fill in credentials -> logged in
  • click logout -> logged out
  • click login -> logged in straight away

No matter how I clear all storage, cookies and what not, this unwanted behaviour persists. How is this possible?

Edit: happens on normal and incognito windows in Safari and Chrome.

Access denied error on Ubuntu 18.04

Hi There,

This is an issue with the JavaScript sample code .
I am facing an access denied error after a successful login on Ubuntu 18.04.
I get a 401 error when after login, auth0 tries hitting /oauth/token and returns {“error”:“access_denied”,“error_description”:“Unauthorized”}
The description is vague and I am just trying to run the sample code.
The same error is coming when I follow the quickstart to set up my code as well.

On windows sample code working fine, but same sample code not working on Ubuntu 18.04.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.