Natalie Marleny

Software Engineer


While implementing features in the Indent dashboard, we heavily use the [localStorage browser API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). A convenient way to use the localStorage in React is the `useLocalStorage` hook from [usehooks.com](https://usehooks.com/useLocalStorage/). Below is a simplified example of the pattern that often occurs in our code while using the `useLocalStorage` hook:

```js
const Component1 = () => {
  const [value, setValue] = useLocalStorage('key1')
  return <div>Component1 {value}</div>;
};

const Component2 = () => {
  const [value, setValue] = useLocalStorage('key1')
  return <div>Component2 {value}</div>;
};

const Page = () => (
  <>
    <Component1 />
    <Component2 />
  </>;
);
```

In the above example we have two independent components utilizing the `useLocalStorage` hook with the same key. The original implementation of the `useLocalStorage` has a few drawbacks when used in this manner:

- **Many re-renders** - Each use of the `useLocalStorage` creates a dedicated state variable with `useState`. Each of these states is completely separate from one another. If all of these states need to be updated to a new value, one re-render is going to occur for _each_ of the updates.
- **Inconsistent state** - Each use of the `useLocalStorage` creates a separate `setValue` function that updates only the piece of state that it is associated with. This means that if the `setValue` is called within one of these components the other component wouldn't reflect the correct value of the localStorage entry until the page is refreshed.
- **Potential race condition** - Each use of the `useLocalStorage` independently reads from the localStorage when _the component using `useLocalStorage`_ is mounted. This means that different components on the same page could potentially read different values from the localStorage. The result could be an inconsistent UI.

![Each read from the localStorage happens on the component mount. Each useLocalStorage reads from the localStorage separately.](../static/blog/state-while-revalidate-beyond-http-requests/useLocalStorage-original.png 'useLocalStorage original')

Initially I was using the [`swr` JavaScript library](https://github.com/vercel/swr) (named after the [stale-while-revalidate](https://datatracker.ietf.org/doc/html/rfc5861) pattern) only for HTTP caching, and then I came to the realisation that `swr` is so much more cool and general purpose to only be a library for caching HTTP requests. So I got the idea to write a `useLocalStorage` implementation which has a more optimal behaviour using the `swr` library and here's the result:

```js
import { useCallback, useMemo } from 'react'
import useSWR, { cache } from 'swr'

const localStorageFetcher = async (_fetcherName: string, key: string) => {
  const item = window.localStorage.getItem(key)
  // An Error occurring in the fetcher is gracefully handled by SWR
  if (item == undefined) throw new Error()
  return JSON.parse(item)
}

export function useLocalStorage<T>(
  key: string,
  initialValue?: T | (() => T)
): any[] {
  const swrKey = useMemo(() => ['localStorageFetcher', key], [key])
  const initialData = useMemo(
    () => (initialValue instanceof Function ? initialValue() : initialValue),
    [initialValue]
  )

  const { data: storedValue, mutate } = useSWR(swrKey, localStorageFetcher, {
    initialData,
    // Read from the localStorage only if the value is not in the cache already.
    revalidateOnMount: !cache.has(swrKey),
    // Disable refetching from the localStorage. After the initialization from
    // the localStorage, the value is not re-read until the page is re-loaded.
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    refreshWhenHidden: false,
    refreshWhenOffline: false,
    shouldRetryOnError: false,
    refreshInterval: 0
  })

  const setStoredValue = useCallback(
    (value: T | ((c: T) => T)) => {
      mutate(
        (currentStoredValue: any) => {
          const valueToStore =
            value instanceof Function ? value(currentStoredValue) : value
          if (valueToStore === currentStoredValue) return currentStoredValue
          window.localStorage.setItem(key, JSON.stringify(valueToStore))
          return valueToStore
        },
        false // don't refetch from the localStorage, just update the state
      )
    },
    [mutate, key]
  )

  return [storedValue, setStoredValue]
}
```

The new `useLocalStorage` has the same API, but:

- it reads from the localStorage only once per page load for the given localStorage key, regardless of the number of times it is called
- it causes only a single additional re-render after the value has been loaded, regardless of the number of times it is called
- when the new components which use the `useLocalStorage` hook enter the page with the same key, they don't read from the localStorage again, but use the `swr` cached value instead
- changing the value in any of the components, using the `setValue` function causes the immediate change in all other components using `useLocalStorage` with that key. No page refresh is necessary.

All of this means that the performance and the robustness of the UI is going to be improved.

![Instead of having a separate piece of state for every invocation of the useLocalStorage hook, we have a single piece of state that all of the useLocalStorage invocations refer to. Only the first component that mounts reads from the localStorage. Every subsequent component reads from the SWR Cache.](../static/blog/state-while-revalidate-beyond-http-requests/useLocalStorage-with-swr.png 'useLocalStorage with SWR')

After implementing this version of the `useLocalStorage` hook I wasn't surprised to discover that others have attempted to do the same. Most notably the [zydalabs/swr-internal-state](https://github.com/zydalabs/swr-internal-state) library contains a slightly different implementation of `useLocalStorage` using `swr`.


We present a more optimal implementation of the useLocalStorage hook that is written using the SWR Javascript library.

stale-while-revalidate-beyond-http-requests

Stale-while-revalidate<br /> beyond HTTP requests

Stale-while-revalidate beyond HTTP requests

Teams can require multiple approvals for an access request

Added support for Microsoft Teams, GitHub and Workday

Users can now sign into Indent Microsoft, Google or Okta

We now support queries using Prestosql v331 SQL syntax

changelog-2020-09

September 2020


<p className="font-medium text-base text-gray-600">In case you missed it...</p>

<div className="relative text-center p-6 rounded-md bg-blue-100">
  <div className="flex">
    <a
      className="mx-auto inline-block"
      href="https://softwareengineeringdaily.com/2020/07/28/access-control-management-with-fouad-matin-and-dan-gillespie/"
      target="_blank"
    >
      <img src="/static/images/landing/sedaily.png" />
    </a>
    <blockquote className="ml-4">
      <div className="max-w-2xl mx-auto text-center text-lg leading-6 font-medium text-gray-900 font-serif">
        <p>
          “This is the classic example of something that has been implemented
          internally a bunch of times and finally gets built as a cloud service.
          So there&rsquo;s also some advantages to having a dedicated system for
          this…”
        </p>
      </div>
    </blockquote>
  </div>
  <footer className="mt-8">
    <div className="flex items-center justify-center ">
      <div className="flex items-center justify-center">
        <div className="flex-shrink-0">
          <img
            className="mx-auto h-10 w-10 rounded-full"
            src="https://github.com/crablar.png"
          />
        </div>
        <div className="ml-2 text-base leading-4 font-medium text-gray-700">
          Jeff Meyerson
          <span className="block align-top text-xs text-left">
            Host, SE Daily
          </span>
        </div>
      </div>
      <div className="flex items-center justify-center ml-6">
        <div className="flex-shrink-0">
          <img
            className="mx-auto h-10 w-10 rounded-full"
            src="https://github.com/ethernetdan.png"
          />
        </div>
        <div className="ml-2 text-base leading-4 font-medium text-gray-700">
          Dan Gillespie
          <span className="block align-top text-xs text-left">
            CTO
          </span>
        </div>
      </div>
      <div className="flex items-center justify-center ml-6">
        <div className="flex-shrink-0">
          <img
            className="mx-auto h-10 w-10 rounded-full"
            src="https://github.com/fouad.png"
          />
        </div>
        <div className="ml-2 text-base leading-4 font-medium text-gray-700">
          Fouad Matin
          <span className="block align-top text-xs text-left">
            CEO
          </span>
        </div>
      </div>
    </div>
    <div className="md:flex md:items-center md:justify-center mt-4">
      <div className="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
        <div className="text-base leading-6 font-medium text-gray-500">
          <a
            href="https://softwareengineeringdaily.com/2020/07/28/access-control-management-with-fouad-matin-and-dan-gillespie/"
            target="_blank"
          >
            Learn about Indent on Software Engineering Daily &rarr;
          </a>
        </div>
      </div>
    </div>

  </footer>
</div>


Teams can create custom forms for access requests

Teams can import and manage access to custom resources

Support for custom OIDC/SAML single-sign on

Updated /access command support in Slack

changelog-2020-08

August 2020

Fouad Matin


Every modern company has to balance enabling speed and agility without compromising security. Teams need a common identity and document provider.

Okta has become the standard system of record for identity, like Box has done with document collaboration in the cloud. Using both, IT and managers can quickly provision Box accounts for their teams. Users still need another step to get access to a specific file or folder, that usually happens outside of these systems of record.

Indent closes the gap between your identity and cloud service providers to help get people the access they need when they need it.

[Learn about how Indent works with Box &rarr;](/box)

<br />

Have questions? [Talk to our team &rarr;](/demo)


secure-access-to-box-with-okta

Secure Access to<br /> Box with Okta

Secure Access to Box with Okta

Send custom audit events via the Indent Write API

Use the Query Engine to explore historical access data

Add two-click onboarding for Slack

changelog-2020-05

May 2020

Dan Gillespie


Today we’re announcing a deeper integration into Amazon Web Services:

<br />

<img
  src="/static/blog/new-integrations-aws-iam-and-dynamodb/iam.svg"
  style={{ width: 100, marginRight: 'auto' }}
/>

## [**AWS IAM**](/docs/connect/aws)

With AWS IAM, teams can request and review access to IAM Groups without leaving Slack. For example if I need access to the development assets S3 bucket, I can type...

`/request-access group s3-dev-assets debug APP-2759`

...and my manager will receive a message to approve.

<br />

<img
  src="/static/blog/new-integrations-aws-iam-and-dynamodb/dynamodb.svg"
  style={{ width: 100, marginRight: 'auto' }}
/>

## [**AWS DynamoDB**](/docs/connect/custom-webhook)

With AWS DynamoDB, teams can gate access to internal role bindings for a production app. For example if I need access to ExampleInc's customer tenant, I can type...

`/request-access tenant exampleinc:read support ticket #492`

...and the customer's account manager will be pinged to approve.

<br />

Want to try them out? [Get started in minutes &rarr;](/demo)


new-integrations-aws-iam-and-dynamodb

New Integrations:<br /> AWS IAM and DynamoDB

New Integrations: AWS IAM and DynamoDB


Today we’re announcing new integrations: G Suite and Okta!

You can connect to either of these identity providers with just a few clicks on the **Connect** page in your Indent dashboard.

Here’s what each new integrations does:

![The G Suite logo](https://www.hypestar.uk/wp-content/uploads/2019/01/G-suite.png)

G Suite is a suite of cloud computing, productivity and collaboration tools, software and products developed by Google Cloud.

With **G Suite + Indent**, now you can monitor for suspicious activity with out-of-the-box anomaly detection and reporting.

![The Okta logo](https://www.okta.com/sites/all/themes/Okta/images/blog/Logos/Okta_Logo_BrightBlue_Medium.png)

Okta provides cloud software that helps companies manage and secure user authentication into modern applications, and for developers to build identity controls into applications, website web services and devices.

With **Okta + Indent**, now you can keep more than 90 days of audit logs required by certain compliance like [SOC 2](/solutions/soc2) or [SOX](/solutions/sox).

<br />

Want to try them out? [Get started in minutes &rarr;](/demo)


new-integrations-gsuite-and-okta

New Integrations:<br /> G Suite and Okta

New Integrations: G Suite and Okta

Blog

Stale-while-revalidate beyond HTTP requests

August 9, 2021

a month ago

Changelog · September 2020

Changelog · August 2020

Secure Access to Box with Okta

June 5, 2020

a year ago

Changelog · May 2020

New Integrations: AWS IAM and DynamoDB

April 4, 2020

a year ago

New Integrations: G Suite and Okta

February 2, 2020

2 years ago

Try Indent for free.