Skip to content

forwardsoftware/react-auth

React Auth

Simplify your Auth flow when working with React apps

license Build & Test Github Issues

Packages

This monorepo contains the following packages:

Package Version Description
@forward-software/react-auth npm Core library — provides AuthClient, AuthProvider, createAuth, and useAuthClient for integrating authentication flows in any React or React Native app
@forward-software/react-auth-google npm Google Sign-In adapter — ready-made AuthClient implementation and drop-in GoogleSignInButton for Web and React Native (Expo)

Examples

The examples folder contains some examples of how you can integrate these libraries in your React app:

Example Description
base Basic authentication flow using @forward-software/react-auth
reqres Authentication using the ReqRes API
refresh-token Token refresh flow with Axios interceptors
expo React Native (Expo) integration

Quick Start

Install the core library:

npm install @forward-software/react-auth

Define your auth client:

import { createAuth, type AuthClient } from '@forward-software/react-auth';

const authClient: AuthClient = {
  onLogin: async (credentials) => {
    // Exchange credentials for tokens
    return { token: '...' };
  },
};

export const { AuthProvider, useAuthClient } = createAuth(authClient);

Wrap your app:

import { AuthProvider } from './auth';

function App() {
  return (
    <AuthProvider>
      <YourApp />
    </AuthProvider>
  );
}

Use the hook to interact with the auth client:

import { useAuthClient } from './auth';

function LoginButton() {
  const authClient = useAuthClient();
  return <button onClick={() => authClient.login({ username: '...', password: '...' })}>Log in</button>;
}

For more details, see the @forward-software/react-auth README.

Looking for a ready-made integration? The @forward-software/react-auth-google package provides a drop-in Google Sign-In adapter with a pre-built AuthClient and GoogleSignInButton for both Web and React Native. See its README for setup instructions.

Project Structure

This project is a monorepo managed with pnpm workspaces:

react-auth/
├── lib/                        # @forward-software/react-auth (core library)
├── packages/
│   └── google-signin/          # @forward-software/react-auth-google (Google Sign-In adapter)
└── examples/                   # Example applications (base, reqres, refresh-token, expo)

For a detailed breakdown of the source layout and architecture, see the Contributing Guide.

Getting Started

Prerequisites

  • Node.js (LTS recommended)
  • pnpm (see packageManager in package.json for the required version)

Installation

pnpm install

See the Contributing Guide for the full list of build, test, and lint commands.

Contributing

Contributions are welcome! Here's how to get started:

  1. Fork the repo and create your branch from main
  2. Install dependencies: pnpm install
  3. Make your changes and add/update tests
  4. Ensure everything works: pnpm -r lint && pnpm -r test && pnpm -r build
  5. Commit using Conventional Commits (e.g., feat: ..., fix: ...)
  6. Open a pull request

For more details, read the Contributing Guide and the Code of Conduct.

Found a security issue? Please report it privately — see our Security Policy.

Credits

This library has been inspired by react-keycloak and similar libraries.

License

MIT


Made with ✨ & ❤️ by ForWarD Software and contributors

If you found this project to be helpful, please consider contacting us to develop your React and React Native projects.