search

auth0 / lock

Auth0's signin solution
https://auth0.com/docs/libraries/lock
Other
1.13k stars 554 forks source link

SocialButtonsPane error in IE 11 #920

Closed glortho closed 7 years ago

glortho commented 7 years ago

After invoking the auth0-lock widget in our app, it starts to come forward but then hangs on the loading indicator. In the console: "Objects are not valid as a React child (found: List [ [object Object] ]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of 'SocialButtonsPane'."

See here:

screen shot 2017-03-10 at 14 48 16

This is with lock version 10.12.3, on IE 11, Win 7 (virtual), React 15.3.2.

Note that these same specs all work as expected in Chrome.

Let me know what other info I can provide!

luisrudge commented 7 years ago

Are you using react and auth0-lock from a CDN?

glortho commented 7 years ago

Sorry @luisrudge I updated my specs. We're just using bundled React and auth0-lock.

Serfenia commented 7 years ago

We have this issue as well on IE 11

luisrudge commented 7 years ago

@Serfenia same config (using a bundler like webpack)?

Serfenia commented 7 years ago

Hello @luisrudge Yes I am using webpack as bundler.

luisrudge commented 7 years ago

Hi @Serfenia and @glortho. I just created a simple create-react-app project and added lock. It works with IE11 without any issues. Can you please share your Lock options and which social connections are you using? If you can create a repro project it would be great as well!

  componentDidMount() {
    const cid = "FUshIKv4fCTzWUs9EgF9kPJ8etf9yImk";
    const domain = "luisrudge-auth0.auth0.com";
    var lock = new Auth0Lock(cid, domain);
    lock.show();
  }

cra-lock

glortho commented 7 years ago

Okay thanks for this @luisrudge . I'll see about getting a repo set up. In the meantime, github is the only auth/provider option we have enabled and these are the lock options we're using:

auth: {
  params: {
    scope: "openid nickname picture blog bio company email location name"
    state: "/"
  },
  redirectUrl: "http://localhost:3000/callback"
}

Note: We also have auth0-lock in a separate vendor bundle from our main app code, along with all other node_modules, using webpack 2's code splitting.

luisrudge commented 7 years ago

@glortho how are you calling lock.show?

glortho commented 7 years ago

@luisrudge we're calling it like so:

const lock = new Auth0Lock( clientId, domain, options );
lock.show();
Serfenia commented 7 years ago

We're using Google as an option to login. 

this.lock = new Auth0Lock(secret, url, {
    theme: {
        logo: '/logo.png'
    },
    disableSignupAction: true,
    rememberLastLogin: true,
    languageDictionary: {
        title: 'Authenticate'
    },
    auth: {
        redirect: false
    },
    allowedConnections: ['Username-Password-Authentication', 'google-oauth2']
});

// Showing
this.lock.show();

We're using it in combination with:

glortho commented 7 years ago

@luisrudge fwiw i can't seem to reproduce this in a barebones repo. but why might it be that something else in my environment is causing what appears to be an immutable.js list to get passed in as children of SocialButtonsPane? maybe there's a bad version of something stuck somewhere? i'll try to blow my whole app away and start from scratch with new dependencies.

glortho commented 7 years ago

No luck blowing everything away and re-installing. More information @luisrudge :

  1. Our app is isomorphic and even though auth0-lock does not get invoked server-side it is required there. It seems like there may be some possibility that this is the culprit since if I use auth0-lock in a different part of our app that isn't isomorphic it seems to work. @Serfenia is your app isomorphic?

  2. We use https://github.com/lerna/lerna with hoisting to manage our repo.

glortho commented 7 years ago

Actually the isomorphic thing may be a red herring, because in the case of it working in a different part of the app, there is nothing else in the bundle and we pass in a container option for it to render off of. I'll try splitting auth0 out into its own bundle and see if that works for the isomorphic app.

Update: No luck splitting it out into its own bundle. Update2: No luck trying to use a CDN version of React.

luisrudge commented 7 years ago

cool @glortho. Let me know if you can build a repro project so I can help you. @Serfenia does your stack look like @glortho's?

glortho commented 7 years ago

Thanks @luisrudge I haven't been able to reproduce with a simple repo. There must be something else conflicting in our rather large dependency stack.

glortho commented 7 years ago

@Update: Specifying auth0-lock, react, react-dom, and transition groups as externals in webpack and then including react-with-addons via cdn (https://unpkg.com/react@15/dist/react-with-addons.js https://unpkg.com/react@15/dist/react-dom.js ) + auth0 via cdn (https://cdn.auth0.com/js/lock/10.13.0/lock.min.js) appears to have worked!

If you're still having problems @Serfenia give that a try and let me know if it works for you.

Here is the relevant part of my webpack config:

externals: {
    'auth0-lock': 'Auth0Lock',
    react: 'React',
    'react-dom': 'ReactDOM',
    'react/lib/ReactTransitionGroup': 'React.addons.TransitionGroup',
    'react/lib/ReactCSSTransitionGroup': 'React.addons.CSSTransitionGroup'
}
Serfenia commented 7 years ago

We're against using CDN's as resource. We only use npm packages.

About the stack, we include the following packages related to Auth0 and React (according to our package.json):

    "auth0-lock": "^10.7.2", 
    "react": "~15.4.1",
    "react-addons-update": "~15.4.1",
    "react-dom": "~15.4.1",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.5",
    "react-tap-event-plugin": "^2.0.1",
    "react-tooltip": "^3.2.2",
luisrudge commented 7 years ago

Yeah, using the CDN will be bad for you two because we ship react+react-dom in the CDN file, so you're loading things unnecessarily.

@Serfenia did you try to update your autho-lock package?

glortho commented 7 years ago

Yes definitely not ideal! We have a delivery this week where being able to login on IE11 takes priority over heavy payload, but after that it'd be good to revisit and see if we can figure out what's happening. 

On Wed, Mar 15, 2017 at 8:11 AM -0600, "Luís Rudge" notifications@github.com wrote:

Yeah, using the CDN will be bad for you two because we ship react+react-dom in the CDN file, so you're loading things unnecessarily.

@Serfenia did you try to update your autho-lock package?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Serfenia commented 7 years ago

NPM follows the semver protocol so a caret (^) will install the latest minor version. Since there is no major version higher than 10 yet it installs the latest version at the moment. Proof:

├─┬ auth0-lock@10.13.0 
│ ├─┬ auth0-js@8.4.0 
│ │ ├── base64-js@1.2.0 
│ │ └── winchan@0.2.0 
│ ├── blueimp-md5@2.3.1 
│ ├─┬ fbjs@0.3.2 
│ │ ├── core-js@1.2.7 
│ │ ├── ua-parser-js@0.7.12 
│ │ └── whatwg-fetch@0.9.0 
│ ├─┬ idtoken-verifier@1.0.1 
│ │ ├── crypto-js@3.1.9-1 
│ │ └── jsbn@0.1.1 
│ ├── immutable@3.8.1 
│ ├── jsonp@0.2.1 
│ ├── password-sheriff@1.1.0 
│ ├─┬ react-addons-css-transition-group@15.4.2 
│ │ └─┬ fbjs@0.8.9 
│ │   └── core-js@1.2.7 
│ ├─┬ superagent@3.5.0 
│ │ ├── cookiejar@2.1.0 
│ │ ├── extend@3.0.0 
│ │ ├─┬ form-data@2.1.2 
│ │ │ └── asynckit@0.4.0 
│ │ ├── formidable@1.1.1 
│ │ └─┬ readable-stream@2.2.5 
│ │   ├── buffer-shims@1.0.0 
│ │   ├── core-util-is@1.0.2 
│ │   ├── process-nextick-args@1.0.7 
│ │   └── util-deprecate@1.0.2 
│ ├── trim@0.0.1 
│ └── url-join@1.1.0
luisrudge commented 7 years ago

@Serfenia yeah.. my question was if you had tried with that (removing the node_Modules and installing again)

Serfenia commented 7 years ago

Yes I did. Did not fix the issue unfortunately. My question is: how can the CDN resource differ from the NPM package?

luisrudge commented 7 years ago

It doesn't differ. The thing is that the CDN has everything needed inside that file. When you install with NPM, it gets bundled with your application, using the packages you're also using.

Are you doing server side rendering as well?

Serfenia commented 7 years ago

No we're not doing any server side rendering. Just static file serving to serve the index html file.

luisrudge commented 7 years ago

@glortho so.. SSR is not the issue. @Serfenia and @glortho can you share your full package.json file? I will create a project that uses all the packages you have in common and try to reproduce the issue.

glortho commented 7 years ago

@luisrudge we have some private dependencies that you won't be able to install, but here are the public ones:

"dependencies": {
    "agenda": "^0.8.0",
    "archiver": "^0.14.3",
    "async": "^0.9.2",
    "autobahn": "0.x",
    "autobind-decorator": "1.x",
    "autolinker": "1.x",
    "babel-polyfill": "6.x",
    "babel-preset-es2015-ie": "6.x",
    "babel-regenerator-runtime": "6.x",
    "body-parser": "^1.15.0",
    "chalk": "^1.1.3",
    "classnames": "2.x",
    "codemirror": "5.x",
    "compression": "^1.6.1",
    "connect": "^3.3.5",
    "connect-flash": "^0.1.1",
    "cookie-parser": "^1.4.0",
    "core-js": "^2.2.2",
    "css-loader": "0.x",
    "csv-stringify": "0.0.8",
    "d3-scale": "^1.0.4",
    "dockerode": "~2.0.3",
    "dom-helpers": "glortho/dom-helpers",
    "event-stream": "^3.3.2",
    "express": "4.x",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "findit": "^2.0.0",
    "form-data": "^0.2.0",
    "fs-extra": "2.x",
    "geojson-vt": "^2.4.0",
    "github": "^2.3.0",
    "handlebars": "4.x",
    "http-proxy": "1.x",
    "install": "^0.7.3",
    "isomorphic-fetch": "^2.2.1",
    "jade": "^1.7.0",
    "js-yaml": "^3.0.2",
    "jsts": "^1.3.0",
    "juno-notebook-controls": "*",
    "leaflet": "1.x",
    "leaflet-draw": "0.x",
    "less-loader": "^2.2.3",
    "lodash": "4.x",
    "marked": "0.x",
    "method-override": "2.x",
    "mongoosastic": "4.x",
    "mongoose": "4.x",
    "mongoose-crate": "^1.0.10",
    "mongoose-crate-imagemagick": "^1.0.3",
    "mongoose-crate-localfs": "^1.1.1",
    "morgan": "1.x",
    "multer": "1.x",
    "node-uuid": "^1.4.1",
    "normalize-path": "^1.0.0",
    "npm": "^3.8.9",
    "oboe": "^2.1.2",
    "passport": "^0.3.2",
    "passport-github": "^1.1.0",
    "react": "15.x",
    "react-bootstrap": "^0.30.3",
    "react-dom": "15.x",
    "react-keydown": "1.x",
    "react-leaflet": "1.x",
    "react-overlays": "^0.6.10",
    "react-router": "2.x",
    "react-skylight": "0.x",
    "react-tabs": "^0.8.2",
    "react-tagsinput": "^3.6.0",
    "relative-date": "^1.1.3",
    "request": "2.x",
    "slice-file": "^1.0.0",
    "socket.io": "^1.3.7",
    "socket.io-client": "^1.3.7",
    "socket.io-stream": "^0.9.0",
    "static-expiry": "0.0.11",
    "style-loader": "0.13.x",
    "terminal.js": "glortho/terminal.js",
    "touch": "0.0.3",
    "unzip2": "^0.2.5",
    "webpack": "2.2.0",
    "webshot": "^0.16.0",
    "when": "^3.4.2",
    "ws": "^0.8.1"
  },
  "devDependencies": {
    "aliasify": "^1.7.2",
    "autoprefixer-core": "^5.1.7",
    "babel-cli": "6.x",
    "babel-core": "6.x",
    "babel-plugin-add-module-exports": "0.x",
    "babel-plugin-transform-decorators-legacy": "1.x",
    "babel-plugin-transform-flow-strip-types": "6.x",
    "babel-plugin-transform-react-constant-elements": ">=6.4.0",
    "babel-plugin-transform-react-inline-elements": ">=6.4.0",
    "babel-plugin-transform-regenerator": "6.x",
    "babel-polyfill": "6.x",
    "babel-preset-es2015": "6.x",
    "babel-preset-es2015-ie": "6.x",
    "babel-preset-react": "6.x",
    "babel-preset-stage-1": "6.x",
    "babelify": ">=7.2.0",
    "browserify": "^12.0.1",
    "del": "~0.1.3",
    "elasticsearch": "^10.1.3",
    "envify": "~1.2.0",
    "enzyme": "2.x",
    "exorcist": "^0.4.0",
    "file-loader": "^0.9.0",
    "flow-bin": "0.x",
    "glob": "^6.0.1",
    "jest-cli": "^0.5.2",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "minimist": "^1.2.0",
    "mock-res": "^0.3.0",
    "node-uuid": "^1.4.7",
    "nodemon": "1.x",
    "proxyquire": "^1.7.3",
    "pump": "^1.0.1",
    "react-addons-test-utils": "15.x",
    "react-hot-loader": "^3.0.0-beta.6",
    "reactify": "^0.15.2",
    "run-sequence": "^1.0.2",
    "sinon": "^1.17.2",
    "sinon-stub-promise": "^2.0.0",
    "source-map-support": "^0.4.0",
    "tap-difflet": "^0.4.0",
    "tap-dot": "glortho/tap-dot",
    "tape": "^4.4.0",
    "tape-catch": "^1.0.4",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "2.x"
  }

and here are the dependencies for our other app with auth0-lock bundled that does work (with container option):

  "dependencies": {
    "@mapbox/geojson-area": "^0.2.2",
    "@turf/intersect": "^3.0.12",
    "alphaify": "^3.0.0",
    "autobahn": "0.x",
    "autobind-decorator": "1.x",
    "autolinker": "1.x",
    "aws-sdk": "^2.4.0",
    "babel-cli": "6.x",
    "babel-loader": "6.x",
    "babel-plugin-add-module-exports": "0.x",
    "babel-plugin-transform-decorators-legacy": "1.x",
    "babel-plugin-transform-flow-strip-types": "6.x",
    "babel-polyfill": "6.x",
    "babel-preset-es2015": "6.x",
    "babel-preset-react": "6.x",
    "babel-preset-stage-1": "6.x",
    "babel-regenerator-runtime": "6.x",
    "chalk": "^1.1.3",
    "classnames": "2.x",
    "copy-to-clipboard": "^3.0.2",
    "css-loader": "0.x",
    "d3-scale": "^1.0.4",
    "express": "4.x",
    "file-loader": "^0.9.0",
    "flux": "^2.1.1",
    "fs-extra": "2.x",
    "geojson-vt": "^2.4.0",
    "handlebars": "4.x",
    "http-proxy": "1.x",
    "isomorphic-fetch": "^2.2.1",
    "jsonwebtoken": "^7.1.9",
    "juno-notebook-controls": "*",
    "jupyter-react-js": ">=0.2.0",
    "leaflet": "1.x",
    "leaflet-draw": "0.x",
    "loader-runner": "^2.2.0",
    "lodash": "4.x",
    "marked": "0.x",
    "method-override": "2.x",
    "moment": "^2.13.0",
    "mongoosastic": "4.x",
    "mongoose": "4.x",
    "morgan": "1.x",
    "multer": "1.x",
    "pug": "^2.0.0-beta2",
    "rc-slider": "^6.1.0",
    "react": "15.x",
    "react-addons-shallow-compare": "15.x",
    "react-datepicker": "^0.29.0",
    "react-dom": "15.x",
    "react-keydown": "1.x",
    "react-leaflet": "1.x",
    "react-leaflet-draw": "0.x",
    "react-overlays": "^0.6.10",
    "react-router": "2.x",
    "react-select": "^1.0.0-rc.2",
    "react-skylight": "0.x",
    "react-sparklines": "^1.6.0",
    "react-tabs": "^0.8.2",
    "react-timbr-machine": "^0.1.3",
    "relative-date": "^1.1.3",
    "request": "2.x",
    "static-expiry": "0.0.11",
    "style-loader": "0.13.x",
    "url-loader": "^0.5.7",
    "webpack": "2.2.0",
    "yargs-parser": "^4.2.1"
  },
  "devDependencies": {
    "autoprefixer": "6.x",
    "babel-core": "6.x",
    "babel-plugin-add-module-exports": "0.x",
    "babel-plugin-transform-decorators-legacy": "1.x",
    "babel-plugin-transform-regenerator": "6.x",
    "babel-preset-es2015": ">=6.9.0",
    "babel-preset-react": "6.x",
    "babel-preset-stage-1": ">=6.5.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "flow-bin": "0.x",
    "json-loader": "^0.5.4",
    "nodemon": "1.x",
    "postcss-import": "9.x",
    "postcss-loader": "1.x",
    "postcss-modules-values": "^1.2.2",
    "postcss-nested": "^1.0.0",
    "react-hot-loader": "^3.0.0-beta.6",
    "stacktrace-js": "^1.3.1",
    "webpack-dev-server": "2.x"
  }
luisrudge commented 7 years ago

@glortho yeah.. that's huge! haha. This looks like an integration issue with another package or packages. I can help you debug this if you can provide me a repro project. Sadly, with the information we have now it's impossible to figure it out the issue. Please reopen the issue if you have time to create a repro project. Thanks for the help!