AuthNest React SDK

Official React client library for the AuthNest authentication service. Easily integrate user authentication, session management, and secure modals into your React applications.

Installation

npm install authnest-react

Quick Start

import { useAuth } from 'authnest-react';

function App() {
  const {
    auth,
    authStatus,
    handleLogin,
    handleLogout
  } = useAuth();

  if (authStatus.isLoading) {
    return <div>Loading authentication...</div>;
  }

  return (
    <div>
      {authStatus.isAuthenticated ? (
        <div>
          <h2>Welcome! You are authenticated</h2>
          <button onClick={handleLogout}>Logout</button>
        </div>
      ) : (
        <div>
          <h2>Authentication Required</h2>
          <button onClick={handleLogin}>Login with AuthNest</button>
        </div>
      )}
    </div>
  );
}

Hook Reference

useAuth([options])

Manages authentication state and provides login/logout functionality.

options: Optional object with debug flag

Returns: { auth, authStatus, handleLogin, handleLogout, handleFreshLogin, retryAuthCheck, modalsAvailable }

useNavigation(auth)

Provides navigation functionality to various AuthNest pages. Returns individual handlers and button configurations.

Returns:

**Returns:** { 
  loadingStates, 
  buttonConfigs, 
  handleNavigation,
  handleGetUserData,
  handleRegistration,
  handleLogin,
  handleUserProfile,
  handleClientProfile,
  handleEmailVerification,
  handleGeneralSettings,
  handleSecuritySettings,
  handleNotificationsSettings
}

Individual Navigation Hooks

For more granular control, you can import individual navigation hooks:

import { 
  useRegistration,
  useLogin,
  useGetUserData,
  useUserProfile,
  useClientProfile,
  useEmailVerification,
  useGeneralSettings,
  useSecuritySettings,
  useNotificationsSettings
} from 'authnest-react';

function MyComponent({ auth }) {
  const { handleGetUserData, loading } = useGetUserData(auth);
  const { handleLogin, loading: loginLoading } = useLogin(auth);
  
  return (
    <div>
      <button onClick={handleLogin} disabled={loginLoading}>
        {loginLoading ? 'Logging in...' : 'Login'}
      </button>
      <button onClick={handleGetUserData} disabled={loading}>
        {loading ? 'Loading...' : 'Get User Data'}
      </button>
    </div>
  );
}

useModalTesting()

Provides modal testing functionality.

Returns: { isLoading, message, authStatus, modalsAvailable, test2FAModal, testPasswordModal, testEmailModal, reloadPage, debugInfo }

Modular Usage Example

import { useGetUserData, useLogin, useUserProfile } from 'authnest-react';

function UserDashboard({ auth }) {
  const { handleGetUserData, loading: dataLoading } = useGetUserData(auth);
  const { handleUserProfile, loading: profileLoading } = useUserProfile(auth);
  
  const handleGetData = async () => {
    const userData = await handleGetUserData();
    if (userData) {
      console.log('User data:', userData);
      // Use the data in your application
    }
  };
  
  return (
    <div>
      <button onClick={handleGetData} disabled={dataLoading}>
        {dataLoading ? 'Loading...' : 'Refresh User Data'}
      </button>
      <button onClick={handleUserProfile} disabled={profileLoading}>
        {profileLoading ? 'Redirecting...' : 'Edit Profile'}
      </button>
    </div>
  );
}

React Example

import { useAuth, useNavigation } from 'authnest-react';

function HomePage() {
  const { auth, authStatus } = useAuth();
  const { loadingStates, buttonConfigs, handleNavigation } = useNavigation(auth);

  return (
    <div>
      <h1>Account Portal</h1>
      <div>
        {buttonConfigs.map((config) => (
          <div key={config.key}>
            <h3>{config.title}</h3>
            <p>{config.description}</p>
            <button
              onClick={() => handleNavigation(config.key, config.url, config.customHandler)}
              disabled={loadingStates[config.key]}
            >
              {loadingStates[config.key] ? 'Loading...' : config.title}
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

Error Handling

const { authStatus } = useAuth();

if (authStatus.error) {
  console.error('Authentication error:', authStatus.error);
}

License

MIT License - see LICENSE file for details.

Support

Create an issue on GitHub

Email: [email protected]