feat: SignIn component for @asgardeo/react

[brionmario]

Purpose

This pull request introduces several updates to the Asgardeo JavaScript SDKs, including new features, terminology updates, and internal refactoring. The most notable changes include the addition of a new SDK for Express.js, updates to improve consistency in naming conventions, and refactoring of the legacy core to use a new storage management system instead of the data layer.

Main Improvements

SiignIn

A comprehensive sign-in component that renders a complete sign-in interface with customizable styling and behavior.

Props

Prop	Type	Required	Description
className	string	No	CSS class name for styling the sign-in container
redirectUrl	string	No	URL to redirect after successful sign-in
onSignInStart	() => void	No	Callback fired when sign-in process starts
onSignInSuccess	(user: User) => void	No	Callback fired when sign-in is successful
onSignInError	(error: Error) => void	No	Callback fired when sign-in fails
buttonText	string	No	Custom text for the sign-in button (defaults to "Sign In")
loadingText	string	No	Text to show while signing in (defaults to "Signing in...")
disabled	boolean	No	Whether the sign-in interface is disabled

Example

+ import { SignIn } from '@asgardeo/react';

const SignInPage = () => {
  const handleSignInSuccess = (user) => {
    console.log('User signed in:', user.username);
    // Redirect to dashboard or update UI
  };

  const handleSignInError = (error) => {
    console.error('Sign-in failed:', error.message);
    // Show error message to user
  };

  return (
    <div className="signin-container">
      <h1>Welcome Back</h1>
+       <SignIn 
+         className="custom-signin" // optional
+         onSignInSuccess={handleSignInSuccess} // optional
+         onSignInError={handleSignInError} // optional
+       />
    </div>
  );
};

export default SignInPage;

Customization: See Customization for comprehensive styling and theming options.

Available CSS Classes

• .asgardeo-signin - Main sign-in container
• .asgardeo-signin--small - Small size variant
• .asgardeo-signin--large - Large size variant
• .asgardeo-signin--outlined - Outlined variant
• .asgardeo-signin--filled - Filled variant
• .asgardeo-signin__input - Input field elements
• .asgardeo-signin__input--small - Small input variant
• .asgardeo-signin__input--large - Large input variant
• .asgardeo-signin__button - Sign-in button element
• .asgardeo-signin__button--small - Small button variant
• .asgardeo-signin__button--large - Large button variant
• .asgardeo-signin__button--outlined - Outlined button variant
• .asgardeo-signin__button--filled - Filled button variant
• .asgardeo-signin__error - Error message container
• .asgardeo-signin__messages - Messages container

Other

New SDK Addition:

• Added an Express.js SDK to the list of available SDKs in the README.md file. (README.md)

Naming Convention Updates:

• Replaced signInRedirectURL with afterSignInUrl and clientID with clientId across documentation and code examples for improved consistency. (docs/src/react/components/asgardeo-provider.md, docs/src/react/introduction.md) [1] [2]
• Updated the isAuthenticated property to isSignedIn in the useAuthentication hook and related components for clarity. (docs/src/react/hooks/use-authentication.md, packages/__legacy__/react/src/components/SignIn/SignIn.tsx, packages/__legacy__/react/src/components/SignedIn/SignedIn.tsx, packages/__legacy__/react/src/components/SignedOut/SignedOut.tsx) [1] [2] [3] [4] [5] [6]

Refactoring for Storage Management:

• Replaced usage of the data layer with the storage manager for configuration and temporary data handling in the legacy core. (packages/__legacy__/core/src/api/authenticate.ts, packages/__legacy__/core/src/api/authorize.ts, packages/__legacy__/core/src/api/get-branding-preference-text.ts, packages/__legacy__/core/src/api/get-branding-preference.ts, packages/__legacy__/core/src/api/get-profile-information.ts, packages/__legacy__/core/src/api/sign-out.ts, packages/__legacy__/core/src/branding/get-branding.ts, packages/__legacy__/core/src/i18n/get-localization.ts, packages/__legacy__/react/src/components/SignIn/SignIn.tsx) [1] [2] [3] [4] [5] [6] [7] [8] [9]

Internal Codebase Updates:

• Removed ResponseMode import and replaced its usage with a direct string value for simplification. (packages/__legacy__/core/src/auth-client.ts, packages/__legacy__/core/src/api/sign-out.ts) [1] [2] [3] [4]
• Updated the repository metadata in package.json to reflect the new project structure. (package.json)

These updates enhance the SDK's usability, maintain consistency across the codebase, and improve internal architecture for better maintainability.

Related Issues

• Fixes feat: SignIn component for @asgardeo/react #66

Related PRs

• N/A

Checklist

• e2e cypress tests locally verified.
• Manual test round performed and verified.
• UX/UI review done on the final implementation.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)
• Integration tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
• Ran FindSecurityBugs plugin and verified report?
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?