Authentication success callback not setting local storage

[BustosAndrew]

here is the js code inside a react component:

const SetCookies = () => {
        GetAuthUrl().then((authorizationUrl) => {
            microsoftTeams.authentication.authenticate({
                url:
                    "https://box-integration-tab.herokuapp.com/?url=" +
                    encodeURIComponent(authorizationUrl),
                width: 600,
                height: 900,
                successCallback: function (result: string) {
                    GetTokenObject(result).then(function (tokenObj) {
                        // document.cookie = `access_token=${tokenObj.access_token};max-age=${tokenObj.expires_in};path=/;samesite=lax`;
                        // document.cookie = `refresh_token=${
                        //     tokenObj.refresh_token
                        // };max-age=${60 * 60 * 24 * 60};path=/;samesite=lax`; //two months
                        ls.set("access_token", `${tokenObj.access_token}`, {
                            ttl: 3600
                        });
                        ls.set("refresh_token", `${tokenObj.refresh_token}`, {
                            ttl: 3600 * 24 * 60
                        });
                    });
                    setShowLogin(false);
                    location.reload();
                },
                failureCallback: (result) => {
                    console.log(result);
                    // try {
                    //     ls.set("failed", "uhoh", { ttl: 30 });
                    //     console.log(ls.get("failed"));
                    // } catch (error) {
                    //     console.log(error);
                    // }
                    setShowLogin(true);
                    console.log(showLogin);
                }
            });
        });
    };

Failure callback always works, but upon successful login it never sets local storage. ls is some node module for handling local storage. To confirm, the start and end page of the auth flow are on the same domain.

Here is a vid describing the issue: https://youtu.be/qdyLejGBdE8

Any way to fix this?

[wictorwilen]

Hard to tell from just this snippet. What is ls? What if you set a local react state with the token?

[BustosAndrew]

ls is a node module that makes writing to local storage with expiration a little easier. And how do you think I should set local react state with the token? By the way, I use the access token in the tab index html, so it would be hard to use the access token from react state. I tried including Box's node module in the react file but it ends up not working.

[BustosAndrew]

here is the html script tag:

window.onload = () => {
            // const accessToken = document.cookie.split("; ").find((row) => row.startsWith("access_token="))?.split("=")[1]; 
            const accessToken = window.ls.get("access_token");
            if (accessToken) {
                const folderID = "0";
                const contentExplorer = new Box.ContentExplorer();
                contentExplorer.show(
                    folderId,
                    accessToken,
                    {
                        container: ".container"
                    }
                );
                document.getElementById("log").innerHTML += `${accessToken}`;
            }
            else {
                document.getElementById("log").innerHTML += `${window.ls.get("failed")}`;
            }
        }