auth0-samples / auth0-react-samples Goto Github PK
View Code? Open in Web Editor NEWAuth0 Integration Samples for React Applications
Home Page: https://auth0.com/docs/quickstart/spa/react
License: MIT License
Auth0 Integration Samples for React Applications
Home Page: https://auth0.com/docs/quickstart/spa/react
License: MIT License
In routes.js the history should be passed to Router component instead of BrowserRouter. See: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js
running the current Auth.js gives me the following error when not using this whole project based on create-react-app.
`ERROR in ./app/Auth/Auth.js
Module build failed: SyntaxError: C:/Users/carlos.valencia/Documents/POCs/cux-tester-app/app/Auth/Auth.js: Unexpected token (4:11)
2 |
3 | export default class Auth {
4 | auth0 = new auth0.WebAuth({
| ^
5 | domain: ...`
As far as i know that is not valid ES2015 syntax, how do you get this to work?
Hi,
When I try and login using the embedded login, I get the following error: Grant type 'http://auth0.com/oauth/grant-type/password-realm' not allowed for the client.
If I enable the password grant type in my application it works. However I can then disable cross-origin authentication and everything continues to work fine.
Is this an issue with Auth0.js V8 that the upcoming V9 should fix?
Any guidance is much appreciated.
Thanks
I configured both auth0-variables.js
and .env
I'm getting above error when making private api call
Insufficient scope
it works however, if I change this line in server
const checkScopes = jwtAuthz(['profile']);
//read:messages - doesnt work
I am using React and trying to use the auth0.parseHash
method in combination with the React-router. My problem is that this method is asynchronous and works by callback. The react router cannot handle promises or that kind of callback as far as I could see. Which mean that I am having issues to use the usual <Redirect>
component to redirect the user depending on the result of the hash extraction...
Considering that this is not calling any outside resource but simple reading the hash why is it a method with callback instead of a synchronous method ? Is there a way I missed to make this work with the Router ? Beside manually forcing a redirect one the processing is finished ? That process is very quick and I don't see why it should be treated as asynchronous. Maybe I am just missing something in the React or Oauth philosophy/process ?
What do you think about using window.location.origin
instead of static URL?
<script>
parent.postMessage({
hash: window.location.hash,
type: 'auth0:silent-authentication'
}, window.location.origin);
</script>
Unsure if this presents any security issues is all 🔒
auth0-react-samples/01-Login/src/Auth/Auth.js
Lines 48 to 55 in 4d9efbc
To work properly, this method should call the auth0.logout
:
this.auth0.logout({
returnTo: URL,
client_id: AUTH_CONFIG.clientId
});
Thanks.
I believe <Router/>
doesn't take component
as a prop,
those have to be passed in children <Route>
s
according to https://reacttraining.com/react-router/web/api/BrowserRouter
Trying to implement the react quickstart, granted in typescript so that may be the issue, but it looks like in routes.js it is calling handleAuthentication with an argument:
auth.handleAuthentication(nextState.location.hash);
but in Auth.js there is no argument. It looks like maybe err, authResult
should be passed in and then forward to parseHash. Is this correct?
When trying to login for the first time an error occur:
{error: "invalid_token", errorDescription: "Request has been terminated↵Possible causes: the n…ol-Allow-Origin, the page is being unloaded, etc."}
After reload the page and try to login again, the error is not shown anymore.
I tried out the token renewal example, and I couldn't get it to work until I changed the renewAuth call in Auth.js to add the option postMessageOrigin: 'http://localhost:3001'
.
Is that a bug in the sample code, or did I configure something wrong?
In the Lock examples, the page is refreshed once the user logs in because of the route change. But how could you achieve the same result without changing the route, i.e. by changing the state of the parent React component?
Hi, I cannot find the function "authFetch" in adminPing() and cause error everything I try to ping in admin panel. Is there anything wrong or do I miss something ?
After doing npm install, I got multiple warnings about skipping optional dependency.
The 2 "optional dependency" warning is shown in every sample project.
The additional warnings:
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellane
ous Warning EAI_AGAIN: request to https://registry.npmjs.org/react-scripts faile
d, reason: getaddrinfo EAI_AGAIN registry.npmjs.org:443
npm WARN registry Using stale package data from https://registry.npmjs.org/ due
to a request error during revalidation.
Happens intermitently in all sample projects
There's a typo in the Authorization sample page (the correct way is: from the variable)
With user profile sample, how could one persist user profile information in a local storage? Putting it into setSession does not seem to work.
Hi, I get Access denied; errorDescription: "Cannot read property 'split' of undefined" when I click on facebook login on the lock. Any idea for this error?
I received this error after login:
"You may have pressed the back button, refreshed during login, opened too many login dialogs, or there is some issue with cookies, since we couldn't find your session. Try logging in again from the application and if the problem persists please contact the administrator."
I cleaned all the browser data including cookies, but cannot get round the error, I use chrome btw, and I have the following set in the allowed callback urls section:
http://localhost:3000,http://localhost:3000/callback
did I miss something? Please help, thanks a lot!
I am running into some problems running the example and not sure if I am setting them up correctly.
Firstly, I am not sure what to use for the AUTH0_AUDIENCE variable - I am using the value listed in my Api tab and am not sure if this is correct
However, I am able to login, view my profile and ping the public endpoint.
It is when I try to call the private endpoint that I receive the message that I am 'unauthorized'
Could you provide any assistance on what I may be doing wrong?
Thank you!
I need to hook into the authentication process but I am not sure where. Basically, the lock will not let you signup an account that already exists. Where is this happening in the code?
I need to also create a new user in the database whenever auth creates a new user, and then simply proceed with the authentication process as normal if it is not a new user.
Is there a hook in the process that allows the Auth process to create a new auth account, or simply log someone in?
None of the info I am logging in the handleAuthentication
function seems to be relevant:
handleAuthentication() {
this.auth0.parseHash((err, authResult) => {
console.log(err)
console.log(authResult)
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
history.replace('/home');
} else if (err) {
history.replace('/home');
console.log(err);
alert(`Error: ${err.error}. Check the console for further details.`);
}
});
}
After multiple login attemps, an error show without a message.
In the console, the error show:
client.js:800 POST https://paulimar-techaid4.au.auth0.com/usernamepassword/login net::ERR_NETWORK_CHANGED
c._end @ client.js:800
c.end @ client.js:706
i.end @ request-builder.js:58
r.login @ username-password.js:37
r.loginWithCredentials @ redirect.js:66
login @ login?client=7N9Ho9OzTHNGEGsclUBWCW7IJxeUPq0r&protocol=oauth2&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&response_type=token id_token&scope=openid&audience=https%3A%2F%2Fpaulimar-techaid4.au.auth0.com%2Fuserinfo&nonce=aKTYnDk6kjg7Ct69QVyddRvAy~_5VIIP&auth0Client=eyJuYW1lIjoiYXV0aDAuanMiLCJ2ZXJzaW9uIjoiOC4xMS4zIn0%3D&state=L9pX6--2bLaWxm6P7I31KUbHklLr6Fg6:126
Its recommended to not store access token on local storage – but this sample code does that. It would help a ton even just to add a note about it on the code, so people will be cautious when copy-pasting.
Wondering if there may be a screencast or similar to demonstrate the implementation of 04-Authorization?
The provided code shows how to include the scope for writing messages for all users who login via auth0. But what are some recommended ways to limit grant/allow privileges based on the actual user?
I think there would would be a way to setup a rule that inspects a users login info and assigns scopes per the login (based on email or username), but am afraid that this may eventually prove unwieldy, so is there a method where I could add a scope programmatically to the token after it has been issued? Perhaps by setting up some sort of API call?
Hi. When trying to run th 01-Login example I had issues with the history.js file. The error received was:
Can't resolve 'history/createBrowserHistory'
To solve that, I had to add the history
dependency to my package.json dependencies: "history": "^4.6.3"
I don't know whether this dependency was supposed to be installed as a automatic dependency of Router4 or if this is was a bug. Any thoughts?
In the 05-renewal-token sample, After I try to get a new token, the console show me a 403 error:
This error is due to a client missmatch. The user has to add http://localhost:3001/silent to the Allowed Callback URL, but the README file doesn't tell this.
After a while, the browser show a message about a timeout error.
any change of having these working on React 16?
(AUTH-3835)
Every sample contains somebody's credentials. For example, 01-basic-login, 02-custom-login-form.
I've followed the directions for 03 - Calling an API
, and I'm receiving this response when calling the private API (http://localhost:3001/api/private
) on my local machine:
API Request (port 3001): GET /api/private 500 27.979 ms - 250 Error: getaddrinfo ENOTFOUND https https:443 at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
This error infers that it's looking for https, but everything is configured to http as outlined in the instructions.
Can you confirm the demo works fine for you?
Is it possible we can get an update to custom login branch?
I am testing the branch directly on my localhost with my Auth0 creds. The only thing that works is signin/signout.
On signups i get Request to Webtask got ESOCKETTIMEDOUT(Error: Unsuccessful HTTP response)
and on social media login i get Error: invalid_request. Check the console for further details. but there is nothing on the console.
I think it is broken and needs to be updated.
Thanks.
Hello,
I've been trying out the demo under the embedded-login
branch but it doesn't appear to authenticate the user when logging in with Google for example.
After debugging I noticed handleAuthentication
doesn't get called when logging in - its not part of the constructor in Auth.js
.
In comparison to the 01 - Embedded-Login example it is present in the constructor.
When I add it in it works as expected. Could we add it in as part of the repo?
this.handleAuthentication();
Unless I'm miss-understanding something and there is another issue here?
In all the examples, you set the createHistory
options to the following:
export default createHistory({
forceRefresh: true
})
This causes a full page refresh after every route change, if I have understood the documentation for history
correctly. So why is this the "sample" way?
Following the 01-Login sample I realised expiresIn
remains 7200 after I've changed the client JWT expiration setting. This change is reflected correctly in the actual jwt token but not in the login success payload.
Am i misinterpreting what expiresIn
represent?
How can I improve this app to call FB api from this app. I tried to call /v2/user/{user-I’d} unable to get identities.it would be really helpful if you get some working samples
Hello, on 01-Login, once I click on the box with my e-mail on it an alert pops up: Error: unauthorized. Check the console for further details.
Th console says:
{error: "unauthorized", errorDescription: "Access denied.", state: "Sors.s5acNIdz7F~ofiIwORC6EbSMbMI"}
Preceeded by
Warning: setState(...): Cannot update during an existing state transition (such as within render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount
.
However, when I go on to the dashboard on the website, it shows that I have successfully logged in 'a few seconds ago'
So I'm not sure why the app is not showing me as logged in?
Apologies if this is not the forum for support questions. I am trying to 1) log into a user account, 2) log out, 3) log in with a different user account.
Step 1 and 2 work as expected, but when I click "log in" again, I am simply logged into the same account from step 1. I do not see the login form where I would be able to enter credentials for a different account.
Is this expected behavior? How can I prompt the login form to show if there is no current active session?
Thanks.
Which would be the best practice to access the auth
instance in a nested component?
Right now in the demo we pass the auth
instance to the different pages as a property. I'd like to access the same instance of auth
in a nested component and propagating the auth
property down the tree doesn't seem right.
Would it be OK to instance the auth
element in the Auth.js
class, do you have a better approach or would it be some kind of anti-pattern?
// in Auth.js
// singleton pattern
export let auth = new Auth();
vs
// current export
export default class Auth
Thanks!
(AUTH-3829)
There are some outdated dependencies:
Going through the motions of 04-Authorization and receiving the following when trying to log in:
Error: invalid_token. Check the console for further details.
Console:
Object {error: "invalid_token", errorDescription: "Algorithm HS256 is not supported. (Expected algs: [RS256])"}
This came about from changing the app's client type from Single Page Application
to Regular Web Application
to accommodate the inclusion of the Authorization Extension
.
Is there a workaround to this? I would like to start investigating using the Auth Extension, but can't find where to change the hashing algorithm.
(AUTH-3899)
samples using outdated version of dependencies such as react-router, auth0-lock.
It's not clear to me from the code in Auth.js
that it's using the subclassing of EventEmitter
-- could it be that's not needed anymore? If so, happy to provide a PR to remove it and the dependency.
Hello.
I made a free account in auth0. I created a Client. 01 and 02 had no issues, but 03 and 04 does.
Call Private button onClick, I have output: Unauthorized
in terminal I have Error:
API Request (port 3001): GET /api/public 200 3.275 ms - 91
API Request (port 3001): GET /api/private 401 6.557 ms - 569
UnauthorizedError: jwt malformed
at /Users/justfly/projects/auth0-react-samples/03-Calling-an-API/node_modules/express-jwt/lib/index.js:102:22
at /Users/justfly/projects/auth0-react-samples/03-Calling-an-API/node_modules/jsonwebtoken/verify.js:27:18
at _combinedTickCallback (internal/process/next_tick.js:95:7)
at process._tickCallback (internal/process/next_tick.js:161:9)
API Request (port 3001): GET /api/public 304 0.946 ms - -
API Request (port 3001): GET /api/private 401 0.758 ms - 569
04 also doesn't want to run with Error in browser console:
Uncaught TypeError: Cannot read property 'split' of null
at Auth.userHasScopes (bundle.js:58757)
at App.render (bundle.js:37538)
at bundle.js:27331
at measureLifeCyclePerf (bundle.js:26611)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:27330)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:27357)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:26897)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:26793)
at Object.mountComponent (bundle.js:14796)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:26906)
PS Node 8.1.2, npm 5.0.4
Hi guys,
I was just trying to get the auth0-lock to work within my react application but have failed to do so (btw. I'm only trying to use the lock-widget since using the hosted login pages does currently not work with Safari/Safari mobile, but that's a different topic.)
Steps to reproduce:
Clone the repo with the Embedded Login Code.
Install the dependencies.
Create a new Client in the auth0 dashboard (since you didn't specify I used a "Single Page App Client").
Copy the client-id and the domain into "auth0-variables.js".
Start the application with "yarn start".
Click on Login and enter credentials with a user that was added manually via dashboard.
An error will be returned: POST https://YOUR_DOMAIN/oauth/token 403 ()
I really need to get this to work. Did anybody else get this to work? If not, is there any direction someone could point me to for a setup with auth0 where Safari will be supported?
EDIT: It seems that passing the option "oidcConformant: true" to the Auth0Lock is the problem. If I leave that out (and thereby also have to leave out the audience) I can successfully authenticate. I will go with that for now.
After clicking login and authorise the app to access my details the following error shows up in the browser concole.
Object {error: "invalid_token", errorDescription: "Algorithm HS256 is not supported. (Expected algs: [RS256])"}
Browser: Chrome
Connection: Google
NodeJS: 8
Would be awesome to have some examples of how to test a login, a signup, a password recovery.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.