When using sign in for the first time, always facing a Uncaught runtime error

[piyumaldk]

Describe the issue:
When using sign in for the first time, always facing a Uncaught runtime error.

Console log

However, weirdly this issue is not reproduced if we have refreshed the page.

How to reproduce:
Used a simple sign in button such as below are try.

import React from 'react';
import { useAuthContext } from "@asgardeo/auth-react";

const SignIn = () => {
    const { state, signIn } = useAuthContext();

    if (state.isLoading) {
        return (
          <h1>Loading</h1>
        );
    }

    return (
        <>
            <h1>AI Subscription Login Page</h1>
            <button onClick={ () => signIn() }>Login</button>
        </>
    );
};

export default SignIn;

Expected behavior:
Redirecting to the login page of Asgardeo without an issue.

Environment information (Please complete the following information; remove any unnecessary fields) :

• Product Version: @asgardeo/auth-react: "^5.1.1"
• OS: Mac
• Database: N/A
• Userstore: N/A

[brionmario]

Hi @piyumaldk,

Could you please share the SDK configuration (clientId and any other sensitive data redacted) you are using in the application.

[NipuniBhagya]

Hi @piyumaldk,

Could you please share the SDK configuration (clientId and any other sensitive data redacted) you are using in the application.

Also, how do you maintain the SDK configurations? (ex: .env, .json or in the index.jsx/main.jsx)

[pavinduLakshan]

This is still reproducible when trying to integrate the SDK with a simple vite React app.

[MarcinSzalomski]

I have the same problem. I'm handling my credentials via .env.

[brionmario]

I have the same problem. I'm handling my credentials via .env.

Which boilerplate are you on? vite, cra or something else?

[MarcinSzalomski]

Which boilerplate are you on? vite, cra or something else?

No boilerplate at all - it's a standalone react instance built by webpack 5. However - I've already managed to get the error fixed. Can't really remember what the solution was though.
That's my config

{
  signInRedirectURL: [LOGIN_URL],
  signOutRedirectURL: [LOGOUT_URL],
  clientID: [CLIENT_ID_FROM_ENV],
  wellKnownEndpoint: [WELL_KNOWN_ENDPOINT_FROM_ENV],
  scope: ['openid', 'profile'],
  enableOIDCSessionManagement: false,
  storage: 'sessionStorage',
  checkSessionInterval: 1,
  autoLogoutOnTokenRefreshError: false,
  enableSilentSignIn: true,
  periodicTokenRefresh: false,
  clockTolerance: 60,
}

Furthermore I'm now using the SecureApp component (from @asgardeo/auth-react) for the logged-in-state checks and redirections to the login page. When i was writing my answer, I was using a custom guard implemented by myself based upon useAuthContext hook.

I'm pretty sure, I've missed out on something back then. It was either a wrong config or the custom state check.

However - with the config and the SecureApp component - it works just fine.