search

mongodb / stitch-js-sdk

MongoDB Stitch JavaScript SDK
Apache License 2.0
113 stars 67 forks source link

Custom user data not showing up on the browser SDK #345

Open supriyo opened 4 years ago

supriyo commented 4 years ago

I enabled custom user data following the instructions, but the field custom_data isn’t showing up on the Stitch User Object when using the browser sdk. I’ve made sure the id field is correct, the ids match up, deployed, etc.

I also don’t see the field on the interface. https://github.com/mongodb/stitch-js-sdk/blob/master/packages/browser/core/src/core/auth/StitchUser.ts.

I’m using the user/email authentication provider and on version 4.7.1 of the sdk.

Let me know if you need any additional info. Thanks

jonbot commented 4 years ago

Same issue here. I log in with email and password:

let appClient = Stitch.initializeDefaultAppClient(projectName);
// ...
appClient.auth.loginWithCredential(credential)
  .then(user => {
    console.log(user);
  });

The user in console.log() does not contain custom_data.

However, if I look at the Network tab in my browser's developer tools, I see a GET call to /profile. This does return custom_data:

Screen Shot 2019-12-31 at 4 59 27 PM Screen Shot 2019-12-31 at 4 58 14 PM

So, it seems like SDK is retrieving the data, but not adding it into the user object.

jsflax commented 4 years ago

Hi there,

This is going to be addressed by https://github.com/mongodb/stitch-js-sdk/pull/349. It should be released in the next few days.

jonbot commented 4 years ago

@jsflax Thanks for the quick response! Looking forward to this.

In the meantime, I've found the best workaround is to query my custom data Atlas collection right after authenticating and then merging the data.

The update will make this much simpler, of course!

hrgui commented 4 years ago

I'm on version 4.8.0, and I can't wrap my head around the following:

> stitchClient.auth.user.customData
{}
> stitchClient.auth.refreshCustomData()
Promise {<pending>}
> stitchClient.auth.user.customData
{_id: "5e40d9db7fc9aa70d97c8c87", created_date: {…}, id: "5e40d9db7fc9aa70d97c8c87", role: "user", updated_date: {…}, …}

Expected: stitchClient.auth.user.customData to eventually no longer be {}, empty object

Actual: stitchClient.auth.user.customData becomes filled with data if stitchClient.auth.refreshCustomData() is called.

What I tried

  1. I tried refreshing the browser
  2. I tried removing local storage cache.
Trimud commented 4 years ago

I have similar issues. At some point calling stitchClient.auth.refreshCustomData(); before stitchClient.auth.user.customData helped but now even this is not working.

Refreshing the browser clears custom data and now both logs returns empty object:

console.log(client.auth.user?.customData);

client.auth.refreshCustomData();
console.log(client.auth.user?.customData);

Edit: If I log client.auth.user I can see the custom data but not if I call client.auth.user?.customData directly.

Trimud commented 4 years ago

I must say that this is becoming really a blocker for me. I tried to JSON.stringify user object which turned out to cause circular JSON issue: 

create.js:7 Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'StitchUserImpl' | property 'auth' -> object with constructor 'StitchAuthImpl' --- property 'currentUser' closes the circle at JSON.stringify (<anonymous>) at createKey (create.js:7) at Object.get key [as key] (create.js:19) at StoreRegistry.generateKey (registry.js:49) at registry.js:35 at useSweetState (hook.js:79) at LoginForm (LoginForm.tsx:16) at renderWithHooks (react-dom.development.js:14825) at mountIndeterminateComponent (react-dom.development.js:17505) at beginWork (react-dom.development.js:18629) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23234) at performUnitOfWork (react-dom.development.js:22185) at workLoopSync (react-dom.development.js:22161) at performSyncWorkOnRoot (react-dom.development.js:21787) at scheduleUpdateOnFiber (react-dom.development.js:21219) at updateContainer (react-dom.development.js:24407) at react-dom.development.js:24792 at unbatchedUpdates (react-dom.development.js:21934) at legacyRenderSubtreeIntoContainer (react-dom.development.js:24791) at Object.hydrate (react-dom.development.js:24857) at renderReactElement (index.js:38) at doRender$ (index.js:44) at tryCatch (runtime.js:45) at Generator.invoke [as _invoke] (runtime.js:271) at Generator.prototype.<computed> [as next] (runtime.js:97) at tryCatch (runtime.js:45) at invoke (runtime.js:135) at runtime.js:170 at new Promise (<anonymous>) at callInvokeWithMethodAndArg (runtime.js:169) at AsyncIterator.enqueue [as _invoke] (runtime.js:192) at AsyncIterator.prototype.<computed> [as next] (runtime.js:97) at Object.push../node_modules/next/node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216) at doRender (index.js:40) at render$ (index.js:25) at tryCatch (runtime.js:45) at Generator.invoke [as _invoke] (runtime.js:271) at Generator.prototype.<computed> [as next] (runtime.js:97) at tryCatch (runtime.js:45) at invoke (runtime.js:135) at runtime.js:170 at new Promise (<anonymous>) at callInvokeWithMethodAndArg (runtime.js:169) at AsyncIterator.enqueue [as _invoke] (runtime.js:192) at AsyncIterator.prototype.<computed> [as next] (runtime.js:97) at Object.push../node_modules/next/node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216) at render (index.js:25)

I managed to get around this using https://github.com/WebReflection/flatted/ but the output doesn't contain any custom data: "customData": "5",

At this point I'm clueless on how to rely on any custom user data.

Kluskey commented 4 years ago

Same issues as @Trimud; any updates here?

berniegreen commented 4 years ago

+1 customData disappears after the page is refreshed for me also. Anyone have a workaround for this yet, or a potential fix in the future? Did you find a solution @Trimud or @Kluskey ?

Trimud commented 4 years ago

You can save user data in state or make a GraphQL query to users collection with your user ID everytime you need this data.

berniegreen commented 4 years ago

I didn't want to add any additional queries if not needed. Would be nice to have this worked as planned. Thank you though and I will try saving it into state for now.

Kluskey commented 4 years ago

@berniegreen I opted to remove Stitch from my project for now. Running into issues like this very early on for foundational functionality concerns me.

daploydev commented 4 years ago

also having the same problem storing the customData in state or a cookie seems like the only option currently