auth0-samples / auth0-react-sample Goto Github PK

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

Samples using lock v10.2.2 when up-to-date version is 10.10. (AUTH-3697)

I'm not really sure if I'm missing something, but it appears that offsetSeconds does nothing here:

https://github.com/auth0-samples/auth0-react-sample/blob/master/10-Customizing-Lock/src/utils/jwtHelper.js#L16

export function isTokenExpired(token){
  const date = getTokenExpirationDate(token)
  const offsetSeconds = 0
  if (date === null) {
    return false
  }
  return !(date.valueOf() > (new Date().valueOf() + (offsetSeconds * 1000)))
}

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.

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

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.

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)?

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

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

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?

https://auth0.com/docs/quickstart/spa/react/02-custom-login

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.

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.

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.

Since this is set as Auth0Lock 'options' inside AuthService
{
auth:
{
redirectUrl: ${window.location.origin}/login,
responseType: 'token'
}
}

options provided to AuthService get ignored...

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

Projects using outdated auth0-lock v 10.0.0-rc.1

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.

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:

1. npm install EDIT: (As Administrator on Windows because it fails to install one of the packages otherwise)
2. npm start
3. 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.

Example 02-Custom-Login using auth0-js, not lock, but package.json contains auth0-lock. (AUTH-3698)

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?

samples using outdated version of dependencies including react-router, cross-env, webpack and etc. (AUTH-3894)

There is no package.json in root?

But after npm init

$ npm install

$ npm start

nothing happens...

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!

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?

There is a lot of this errors in 00, 01, 02, 03 projects

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 ?

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?

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.