Saturday, May 20, 2017

MERN Series Step 6 - Auth0 with Tech-Dojo

With the copying of files from the create-react-app auth0 scripts our tech-dojo mern app still runs fine, and the tests all run as well, except for the one that was failing at the start (1) should fail to save an existing user again).  Don't forget to have mongodb running for the unit tests.
Now we'll wire up the auth0 login/signup instead of the login/signup that is in the tech-dojo starter.  Step 1, add the login component from auth0 to app/components/App.jsx by inserting import Login from './auth/Login.js'; to the bottom of the imports section.  Step 2, add a route so we can get to the login component, the routes section should be pretty obvious, it has about 10 lines starting with <Route …>, so I'm adding         <Route path="/login" component={Login} /> to the bottom of that.  Now lets open the site and see what happens.

Hmm, ok, middle of the page is missing content, and the dev tools console says:

app\components\App.jsx:33 Uncaught ReferenceError: Login is not defined
    at new exports.default (app\components\App.jsx:33)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:148)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:37)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:37)
    at mountComponentIntoNode (ReactMount.js:266)
    at ReactReconcileTransaction.perform (Transaction.js:136)
    at batchedMountComponentIntoNode (ReactMount.js:282)

Ok, so looking closer at /app/components/auth/login.js I see:
import {login} from '../auth';
So it looks like I moved the auth.js file one folder to high, so move it from the apps folder to the components folder.

After the move, now I get this in the console:
C:/Repos/mern/app/components/auth.js: Unexpected token (67:10) while parsing file: C:\Repos\mern\app\components\auth.js
  65 | export function connectProfile(WrappedComponent) {
  66 |   return class ProfileContainer extends Component {
> 67 |     state = {
     |           ^
  68 |       profile: null
  69 |     };
  70 |

Ok, no idea here what's going on.  Taking a step back and going to make sure the create-react-app with auth0 customizations that I started from is working, and it appears that it's not, so I'm going to get that working first and hopefully that will either solve my issues or point me in the right direction.  Looking at the generic create-react-app w/o the auth0 additions and that works fine, so I have likely missed something I need to do to enable auth0 to work.

Running the base auth0 app and I'm getting this:
warning.js:36 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router (at App.js:12) in App (at index.js:7)
After hunting through the results in google, looks like react-router has changed significantly since the auth0 scripts were created, they should probably have that pinned to ^3.0.5 until they update the routes to be 4.x compliant.  To get it running I had to update packages.json to use
    "react-router": "^3.0.5"
And remove the entry for react-router-dom (it's only for 4.x version of react-router).  Once that change was made make sure your server isn’t running, do npm i and restart your server and it should work.  One other thing to note, when you're putting your client key and domain in, make sure you remove the curly braces, that's not evident until you look at the errors in the console.

So, now with my base auth0 react-app running fixing the tech-dojo version should be easy. Still getting this error:
C:/Repos/mern/app/components/auth.js: Unexpected token (67:10) while parsing file: C:\Repos\mern\app\components\auth.js
  65 | export function connectProfile(WrappedComponent) {
  66 |   return class ProfileContainer extends Component {
> 67 |     state = {
     |           ^
  68 |       profile: null
  69 |     };
  70 |

Update dependencies in package.json, several missing or out of date:
  "dependencies": {
    "async": "^1.5.0",
    "auth0-lock": "^10.14.0",
    "babel": "^6.0.0",
    "babel-core": "^6.2.1",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-react": "^6.1.2",
    "babelify": "^7.2.0",
    "body-parser": "^1.12.4",
    "connect-mongo": "^1.0.2",
    "cookie-parser": "^1.4.0",
    "cors": "^2.6.0",
    "dotenv": "^4.0.0",
    "ejs": "^2.3.1",
    "events": "^1.1.1",
    "express": "^4.15.2",
    "express-jwt": "^5.3.0",
    "express-session": "^1.15.2",
    "glob": "^6.0.1",
    "guid": "0.0.12",
    "gulp-uglify": "^1.5.3",
    "history": "1.17.x",
    "jquery": "^2.1.4",
    "jwt-decode": "^2.2.0",
    "lodash": "^3.10.1",
    "mongoose": "4.0.3",
    "node-jsx": "^0.13.3",
    "nodemailer": "^1.10.0",
    "object.assign": "4.0.3",
    "passport": "^0.3.2",
    "passport-auth0": "^0.6.0",
    "passport-local": "^1.0.0",
    "react": "^15.5.4",
    "react-bootstrap": "^0.28.1",
    "react-dom": "^15.5.4",
    "react-router": "^3.0.5",
    "react-router-bootstrap": "^0.20.1",
    "react-slick": "^0.9.3",
    "react-tools": "^0.13.3",
    "reactcss": "^0.4.2",
    "reactify": "^1.1.1",
    "source-map": "^0.5.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
 and run npm I to install them

And we still get this:
C:/Repos/mern/app/components/auth.js: Unexpected token (67:10) while parsing file: C:\Repos\mern\app\components\auth.js
  65 | export function connectProfile(WrappedComponent) {
  66 |   return class ProfileContainer extends Component {
> 67 |     state = {
     |           ^
  68 |       profile: null
  69 |     };
  70 |

So, integrating the auth0 scaffolding from create-react-app may not be the way to go, not sure but there may be something in there dependent on what react-scripts does.  I'm going to look at pulling in the code from the 01-login example from auth0 that doesn't use create-react-app.

Insert these transforms after the babelify tranform:
    .transform("brfs")
    .transform("ejsify")
    .transform("reactify")

You'll need to add brfs and ejsify to your package.json also
Npm I --save-dev brfs
Npm I --save-dev ejsify

Now I'm getting:
[08:03:41] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value ".tmp/scripts/" is not an absolute path!
    at webpack (C:\Repos\ItSideJobs\web\node_modules\webpack\lib\webpack.js:19:9)
    at Gulp.gulp.task.cb (C:\Repos\ItSideJobs\web\gulpfile.js:36:3)
    at module.exports (C:\Repos\ItSideJobs\web\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Repos\ItSideJobs\web\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Repos\ItSideJobs\web\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Repos\ItSideJobs\web\node_modules\orchestrator\index.js:134:8)
    at C:\Users\David\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:606:11)

No comments:

Post a Comment