Keep login information persistent with 12.0.0-browser.2

[cyril36]

How frequently does the bug occur?

Always

Description

Hello,

I am using realm 12.0.0-browser.2 and my login information (access token, refresh token...) are not saved in the local storage as realm-web does. I would like to keep the user information even after refreshing and i guess i have to manage it myself. However I dont know how I can reload those information into my application after reloading. realm-web has a mechanism to handle this process while realm 12.0.0-browser.2 does not.

I have tried to mix the app from realm-web to inject it into realm 12.0.0-browser.2 components but the app objects from realm-web and 12.0.0-browser.2 are different.

How can i perform this task? What are the information that i should keep in my local storage/cookie? How can i load them back to be still logged in after refreshing my page?

Thank you for your help

Stacktrace & log output

No response

Can you reproduce the bug?

Always

Reproduction Steps

git clone https://github.com/realm/realm-js.git cd realm-js git checkout nh/wasm/emscripten_target cd examples/example-react-task lauch the app login refresh

the login information is lost

Version

12.0.0-browser.2

What services are you using?

Both Atlas Device Sync and Atlas App Services

Are you using encryption?

No

Platform OS and version(s)

ubuntu

Build environment

Which debugger for React Native: ..

Cocoapods version

No response

[sync-by-unito[bot]]

➤ PM Bot commented:

Jira ticket: RJS-2859

[akshayxfortech]

we created a collection called ApiTokens and after login created a token and sends it to the client.The client stores it in the local storage.Then the custom function would use the api token to log the user back in after a refresh.

[cyril36]

@akshayxfortech Do you have a code exemple about how to re-inject the token and refresh token back in my UserProvider component? I wanted to use the method you explained but i dont know where to use with api token and refresh token in my code

[jamalsoueidan]

Same issue here!

I think he want you to save the accessToken received from facebook sdk or from previous login:

  const credentials = Realm.Credentials.facebook(
    response.authResponse.accessToken
  );

  await app.logIn(credentials);

[cyril36]

But I am not using Facebook credentials.

In the case of anonymous login, the token is provided by atlas service. If I refresh my page I loose this token and a new anonymous user will be created in the atlas service backend

I would like to know how I can store this token in the local storage and reinject it back in my userprovider, this way after refreshing, I would keep the same token of this anonymous user

Best regards Cyril

[jamalsoueidan]

But I am not using Facebook credentials.

In the case of anonymous login, the token is provided by atlas service. If I refresh my page I loose this token and a new anonymous user will be created in the atlas service backend

I would like to know how I can store this token in the local storage and reinject it back in my userprovider, this way after refreshing, I would keep the same token of this anonymous user

Best regards Cyril

When user login:

const accessToken = response.authResponse.accessToken; // get the accesstoken from realm.
localStorage.setItem("facebookAccessToken", accessToken);
await app.logIn(Realm.Credentials.facebook(accessToken));

When user reload the page:

useEffect(() => {
  const accessToken = localStorage.getItem("facebookAccessToken");
  if (accessToken) {
    const credentials = Realm.Credentials.facebook(accessToken);
    app
      .logIn(credentials)
      .catch((err) => console.log("Failed to log in:", err));
  }
  }, []);

[kneth]

@cyril36

If I refresh my page I loose this token

This is expected as It is a current limitation

[cyril36]

@kneth

I understand that it is the expected behavior, however i would like to save the token generated by the app.logIn(credential) function into my localStorage , then when i reload the page, my page will first check if i have a token in my local storage and reinject it into my UserProvider component. E.g : Login process :

const user = await app.logIn(credentials);
 const credentials = Realm.Credentials.anonymous();
  // Authenticate the user
  const user = await app.logIn(credentials);
  // add the token to the localstorage
  localStorage.setItem('myatlastoken', user.accessToken)

Then when i reload the page :

const [token, setToken] = useState("")

useEffect(()=>{
   setToken(localStorage.getitem("myatlastoken"))
},[])

return (<AppProvider id={appId}>
             <UserProvider existingUser={token} fallback={MyLogInComponent}>
                 <UserInformationComponent/>
            </UserProvider>
        </AppProvider>
        )

The suggestion would be to have a new prop in the UserProvider such as existingUser={token} allowing us to put an existing token to retrieve an existing user information. It would help us to re-inject the token and do not loose the user information everytime reloading the page.

Is there anything similar that already exist? Is it possible to implement it?