How to automate testing?

[PauloStanize-NHT]

Hello! I would like some insights about how to automate tests with cypress. According to docs, cypress does not support automating pages in different domains, thus I cannot insert the credentials and click on login button. It needs to be done programmatically. https://docs.cypress.io/guides/end-to-end-testing/google-authentication

I have tried the approach mentioned on the docs, but it is not possible to simple set the token to localStorage when using PKCE.
Also I tried to fetch the token and set into localStorage variables, but react-oauth2-pkce's context does not recognize it. I would expect it to load the data from local storage variables into context and work with that... I am missing something?

I am using a custom oauth2 provider.

My POC code looks like this:

const config = {
  clientId: "my clientId",
  authorizationEndpoint: "my authorizationEndpoint",
  tokenEndpoint: "my tokenEndpoint",
  redirectUri: "http://localhost:3001/insights/dashboard",
  decodeToken: true,
  scope: "my scope",
  autoLogin: false,
  extraAuthParameters: {
    prompt: "login",
  },
  logoutEndpoint: "my logoutEndpoint",
};

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const codeVerifier = _.random(0, 9999999999999999).toString(36);

    axios
      .request({
        method: "POST",
        url: "my token URL",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          client_id: "my client_id",
          client_secret: "my client_secret",
          username: "my username",
          password: "my password",
          grant_type: "my grant_type",
          scope: "my scope",
        },
      })
      .then((res) => {
        localStorage.setItem("PKCE_code_verifier", codeVerifier);
        localStorage.setItem("ROCP_tokenExpire", `${+new Date() + 3600000}`);
        localStorage.setItem("ROCP_loginInProgress", "false");
        localStorage.setItem(
          "ROCP_refreshTokenExpire",
          `${+new Date() + 3600000}`
        );
        localStorage.setItem("ROCP_token", res.data.access_token);
        localStorage.setItem("ROCP_refreshToken", "undefined");
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return null;
  }

  return (
    <AuthProvider authConfig={config}>
      <Router basename="/insights">
        <Switch>
          <Route exact path="/login">
            <Login />
          </Route>
          <Route exact path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </Router>
    </AuthProvider>
  );
};

export default App;

Thanks for helping and great work building this library!

[sebastianvitterso]

As far as I can see, this should work out fine.

I haven't done any e2e-testing with auth enabled, generally we just disable it. If that is an alternative, that's my recommendation. Still, if you have to authenticate to use external services, I realize that this might not be an option.

It might be that @soofstad can spot some issues in the code snippet you posted.

[PauloStanize-NHT]

Hey @sebastianvitterso thanks for your contribution! I disabled it for now, but in future it won't be possible

@soofstad sorry to ping you again, but do you have any suggestion?

[sebastianvitterso]

FYI: @soofstad is currently offline, as he's on a week-long skiing hike/trip. He'll be back monday, I think!

[soofstad]

Hello @PauloStanize-NHT

Think i found the issue. Atleast got your snippet to work as intended.

The problem is that your are not formating the "token" as a JSON-string when writing to localStorage.
You wrote it as thisismytoken, then when the library try to load this, as seen in this code:

function useLocalStorage<T>(key: string, initialValue: T): [T, (v: T) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    const item = localStorage.getItem(key)
    try {
      return item ? JSON.parse(item) : initialValue
    } catch (error) {
      return initialValue
    }
  })

It fails, causing it to return the "initialValue". JSON-strings must be quoted to be parsed as a valid string, like so:
localStorage.setItem("ROCP_token", '"myToken"');

I remember we used to log these errors at some point, but removed it. That might have been a bad decision.

[PauloStanize-NHT]

I tested on my POC and it worked!!!
Thanks for your help guys @soofstad @sebastianvitterso