These samples have been deprecated. Please see the auth0-react-samples repo for the latest Auth0 and React integration samples.
auth0-react-sample's Introduction
auth0-react-sample's People
Forkers
mehreencs87 akbowlin szare jketels newswim czarnega vas3a marcelmichau kgalli chnl ashishdasnurkar dnavid obengwilliam jbpark0509 alemata sedo1125 mazzzy chrisciampoli wwombatt kimchicoffee joelcoxokc mchernyavskaya tkinzer alexofob whtouche szokrika erspark2002 dskoda1 tayzlor cbroomhead ozymandias547 jmsherry cmccaw runpixelrun knowblearticles cage1016 webruin engineeredtruth johnsmalley vmartynets shaialon toondc ctingwai belfz icarusmj12 vinniewrote anativhq montanasdelpablo neeboo rmoorman computerluca frabaglia bhagat19 lnhrdt prwelber moricard kkaatii ll5914 hugoinperson brendon9 mkliu palhudcros therealgilles guanzhou-zhao andys8 amccloud daniel-rhoades miaong andreafalzetti pb8226 ppbodor roboli ecf-decodemtl-finalproject kitchdev jdubz kurtzilla dabisrat kwhitejr jeauxy chaoice pmlarocque james abglassford jacob1234098 jackiecabinet modulexcite granmoe joemsak ashlux kaikeanaaina hotsen alokjoshi nathanjensby benorman ciasp mtarapata kfajardo-agsx devon-peroutky rhasan33 simmcoauth0-react-sample's Issues
Token validation is failing
First thing I wanted to point out is that there is mismatch in documentation and the actual code:
in auth0-react-sample/08-Calling-Api/server.js
var authenticate = jwt({
secret: new Buffer(process.env.AUTH0_SECRET, 'base64'),
audience: process.env.AUTH0_CLIENT_ID
});
In the actual documentation the example doesn't use new Buffer
Secondly, both solutions did not work for my applications and after hours of research I found that this code works:
app.use(jwt({
// Dynamically provide a signing key based on the kid in the header and the singing keys provided by the JWKS endpoint
secret: jwksRsa.expressJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: `https://{YOUR_AUTH0_DOMAIN}/.well-known/jwks.json`
}),
// Validate the audience and the issuer
audience: '{YOUR_API_IDENTIFIER}',
issuer: 'https://{YOUR_AUTH0_DOMAIN}/',
algorithms: [ 'RS256' ]
}));
Found on:
https://auth0.com/docs/architecture-scenarios/application/server-api/api-implementation-nodejs
Is it just me who has this problem or the documentations needs an update?
TypeError: __WEBPACK_IMPORTED_MODULE_3_auth0_js__.webAuth is not a constructor
Hi All,
I am getting below error:
TypeError: WEBPACK_IMPORTED_MODULE_3_auth0_js.webAuth is not a constructor
I am using "auth0-js": "^8.9.1", in my package.json and have followed those auto generated docs and have come across this error.
Please let me know the solution of this.
Problems with 02-Custom-Login
Hello,
I have a problem with the second example I am getting error 401 all the time, both trying exmaple from this repository or trying to implement a solution using guide. It worked with v7 but for some reason, v8 doesn't work for me.
Best, Iurii
outdated auth0 lock
Projects using outdated auth0-lock v 10.0.0-rc.1
Update guides to react router 4
I've been founding some issues following the guides and is because they're outdated. You guys are thinking in updating the code to use it with react router 4?
For example like the onEnter
callback that is not available anymore https://github.com/auth0-samples/auth0-react-sample/blob/master/02-Custom-Login/src/views/Main/routes.js
remix-run/react-router#4976
outdated dependencies
samples using outdated version of dependencies including react-router, cross-env, webpack and etc. (AUTH-3894)
Private endpoint returns unauthorized on 08-Calling-Api
Steps to repro:
Clone the rep
cd 08-Calling-Api
npm install
set .env file
npm start
I can log in and out and the UI works, but the private endpoint is always unauthorized. I'm getting this error in the console:
Error
at middleware (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express-jwt/lib/index.js:75:21)
at Layer.handle [as handle_request] (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/route.js:131:13)
at Route.dispatch (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/layer.js:95:5)
at /Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/index.js:277:22
at Function.process_params (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/index.js:330:12)
at next (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/index.js:271:10)
at expressInit (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/middleware/init.js:33:5)
at Layer.handle [as handle_request] (/Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express/lib/router/layer.js:95:5)
Error
at /Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/express-jwt/lib/index.js:101:22
at /Users/ericlu/Sites/github/auth/08-Calling-Api/node_modules/jsonwebtoken/index.js:54:18
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
Any ideas on why the example is broken?
Thanks for your help!
Does 02-Custom-Login app work with Custom Database?
I cannot get the app to work and always get a 404 error from the Auth0 API. Seems like a simple React app. Anyone using a Custom Database give me clues into getting the code to work? Thanks
01-Login example usage incompatible with React 15.4.2
The login examples provided in this repo and in auth0's documentation indicate the use of React.Component
's static contextTypes
and propTypes
fields: https://github.com/auth0-samples/auth0-react-sample/blob/master/01-Login/src/containers/App/App.js#L5-L12
Per the react docs:
If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React.
As indicated in a tweet by Dan Abramov, if a library is asking developers to use these features, file a bug.
The code provided by auth0 works with react 15.3, but breaks when trying to use the latest version of react.
Would auth0 be willing to provide a higher order component to provide developers a reusable piece, and to abstract us away from needing to use experimental features?
Using default app, get error if trying to navigate to localhost:3000/home
With this sample app, if you try to go to localhost:3000/home and are not logged in, you get a login popup as expected. But after logging in, you get an error about "localhost:3000/home" not being in the list of allowed callback URLs. If there were more routes on this app that were auth-protected, how could you redirect to the original route without always running into the issue of allowed callback URLs (unless you hardcode in every possible route in Auth0)?
How to run app?
There is no package.json in root?
But after npm init
$ npm install
$ npm start
nothing happens...
I can't get the login screen to show.
I can't get the login screen to show from the sample code. I have tried 01-Login and 10-Customizing-lock, and I get the no login screen. What am I missing?
02 example using auth0.js, not lock
Example 02-Custom-Login using auth0-js, not lock, but package.json contains auth0-lock. (AUTH-3698)
Options not being passed to lock through AuthService
Since this is set as Auth0Lock 'options' inside AuthService
{
auth:
{
redirectUrl: ${window.location.origin}/login
,
responseType: 'token'
}
}
options provided to AuthService get ignored...
02-custom login google-oauth2
I don't get it, isn't this supposed to log me in ? When using the username-password method, I get redirected to /home, when using the google-oauth2 method, nothing happens, except a
[HMR] connected
in console.
EDIT: It seems to come from react-router onEnter
method in routes.js, which doesn't trigger.
Following the tutorial requires react-router@^3.x.x, not @^4.x.x
Following the documentation from Auth0 React SDK Quickstarts the initial application will fail because react-router changes the way history is created in 4.x.x
Changing the package.json required version to ^3.x.x allows the quickstarts to be followed.
Prerendered HTML files
Hi, thanks for these great examples!
With the actual configuration of this nice hjs-webpack that uses CSS modules and path aliases like "utils" I'm not able to use the html function to prerender specific files.
Do you have any example or experience on that? Would be a nice improvement to prevent FOUC.
Missing cleaner in logout( )
We save "access_token" to localStorage at "setToken( )"
setToken(accessToken, idToken) {
// Saves user access token and ID token into local storage
localStorage.setItem('access_token', accessToken)
localStorage.setItem('id_token', idToken)
}
but don't clean it on calling "logout( )"
logout() {
// Clear user token and profile data from localStorage
localStorage.removeItem('id_token')
localStorage.removeItem('profile')
}
While it's true the token is a JWT therefore it has an expiration...we should still clean it.
Should we not?
UnauthorizedError: No authorization token was found in lesson 11
Clicking login button didn't bring up the login dialog. Instead, it redirects to auth0 error page. it seems the web client is broken somehow.
Unnecessary `offsetSeconds`
I'm not really sure if I'm missing something, but it appears that offsetSeconds
does nothing here:
export function isTokenExpired(token){
const date = getTokenExpirationDate(token)
const offsetSeconds = 0
if (date === null) {
return false
}
return !(date.valueOf() > (new Date().valueOf() + (offsetSeconds * 1000)))
}
Not Able to redirect to home page after login
I am using - https://auth0.com/docs/quickstart/spa/react/01-login approach for login on my app. Everything is working fine except after login it is not redirecting to home
page.
After redirection url i am getting - /login#
Here is my route -
<Router history={browserHistory}>
<Route path="/" component={App} auth={auth}>
<IndexRedirect to="/home" />
<Route path="/login" component={Login}/>
<Route path="/home" component={AppComponent} onEnter={requireAuth}>
<Route path="/match" component={Match}/>
<Route path="/player" component={Player}/>
</Route>
</Route>
</Router>
Any Clue ?
Cannot reach the server
Hi,
I'm trying to get the first example 01-login to work.
When I attempt to login, the app shows this message:
WE COULD NOT REACH THE SERVER. PLEASE CHECK YOUR CONNECTION AND TRY AGAIN.
I haven't made any change to the app except putting auth0 client details into .env
. I'm using europe domain: eu.auth0.com
.
outdated auth0 lock
Samples using lock v10.2.2 when up-to-date version is 10.10. (AUTH-3697)
bootstrap/dist/css/bootstrap.css doesn't exist
In the latest version of react-bootstrap, it doesn't exist at least. You have to link to the cdn I think.
Example one is trying to import it:
import 'bootstrap/dist/css/bootstrap.css'
https://github.com/auth0-samples/auth0-react-sample/blob/master/01-Login/src/app.js
warning:unknown prop errors
Fails to get a local url
Following the instructions found in the Auth0 docs (Which uses this repo) fails.
Viewing the console shows an net::ERR_CONN_CLOSED
error on the GET
request to https://localhost:3000/client/<clientId>.js?t1467053782565
. This error shows up before clicking anything. Clicking the Login button brings up a modal with a loading circle which never changes.
I tried directly copying and pasting the code from the instructions to my files and it still failed. I finally tried the given code and it failed the same way.
Steps to reproduce:
npm install
EDIT:(As Administrator on Windows because it fails to install one of the packages otherwise)npm start
- Navigate to
localhost:3000
and look at the developer console.
EDIT: Update on the running as admin issue
I didn't have git in my PATH and as a regular user npm gives an error saying something like "Sorry, try again as admin". When I tried as admin it told me about the PATH problem. I added git to the PATH and the problem went away and seems to work fine without running as admin.
Auth0 is not a constructor
Reproduce:
Clone this repo
populate .env
npm install
/npm start
in 02-Custom-Login
go to localhost:3000
Error:
Uncaught TypeError: _auth0Js2.default is not a constructor
at new AuthService (eval at <anonymous> (http://localhost:3000/app.js:3150:2), <anonymous>:34:19)
at eval (eval at <anonymous> (http://localhost:3000/app.js:3144:2), <anonymous>:32:12)
at Object.<anonymous> (http://localhost:3000/app.js:3144:2)
at __webpack_require__ (http://localhost:3000/app.js:556:30)
at fn (http://localhost:3000/app.js:87:20)
at eval (eval at <anonymous> (http://localhost:3000/app.js:3138:2), <anonymous>:14:15)
at Object.<anonymous> (http://localhost:3000/app.js:3138:2)
at __webpack_require__ (http://localhost:3000/app.js:556:30)
at fn (http://localhost:3000/app.js:87:20)
at eval (eval at <anonymous> (http://localhost:3000/app.js:660:2), <anonymous>:21:15)
Also happens when I try to replicate the AuthService
class in my app.
Tangential, but is there some serious flux in the auth0
sdks recently? This is the third or fourth Auth0 React starter kit I've tried today where I've hit a dead-end just by following auth0 docs/tutorials. Willing to accept that I'm botching it over-and-over somehow, but haven't had this kind of trouble in the past w/ other auth providers.
LocalStorage in a Node-React app
I've no idea how to implement LocalStorage in React yet so I tried installing node-localstorage which lead to this error:
var fs$ReadStream = fs.ReadStream
ReadStream.prototype = Object.create(fs$ReadStream.prototype) // throws error...
Uncaught TypeError: Cannot read property 'prototype' of undefined
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.