React Auth

React Auth

React Auth is a powerful library designed to streamline the authentication flow within React and React Native applications. It simplifies the management of authentication processes, allowing developers to easily integrate secure login systems in their applications.

Features

This repository includes the following key packages:

Package	Version	Description
@forward-software/react-auth		Core library that provides essential functionalities such as AuthClient, AuthProvider, and hooks for seamless authentication integration.
@forward-software/react-auth-google		Ready-to-use Google Sign-In adapter featuring a comprehensive AuthClient implementation and a convenient GoogleSignInButton, compatible with both Web and React Native (Expo).

Example Implementations

The examples folder showcases various integration scenarios:

Quick Start

Integrating the core library is straightforward. Begin with installing the core library in your project:

npm install @forward-software/react-auth

Then, define your authentication client as outlined below:

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 application with the AuthProvider:

import { AuthProvider } from './auth';

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

Utilize the useAuthClient hook for authentication interactions:

import { useAuthClient } from './auth';

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

For comprehensive details about usage and configuration, refer to the @forward-software/react-auth README.

Google Sign-In Integration

For a quick setup of Google authentication, explore the @forward-software/react-auth-google package. It includes a pre-configured AuthClient and GoogleSignInButton that allows for an effortless setup on both Web and React Native platforms. Check its README for further instructions.

Project Structure

This repository is organized as a monorepo using pnpm workspaces:

react-auth/
├── lib/                        # Core library
│   ├── src/                    # Source code
│   └── test/                   # Unit tests
├── packages/
│   └── google-signin/          # Google Sign-In adapter
│       ├── src/                # Implementation code
│       ├── android/            # Android native module
│       ├── ios/                # iOS native module
│       └── test/               # Unit tests
└── examples/                   # Example applications

Contributing

Contributions are encouraged and welcome. To contribute:

1. Fork the repository and create a branch from main.
2. Install the required dependencies with pnpm install.
3. Make the necessary changes and ensure to add or update tests accordingly.
4. Verify your code works: pnpm -r lint && pnpm -r test && pnpm -r build.
5. Commit changes using Conventional Commits format.
6. Open a pull request to the main repository.

For additional details, refer to the Contributing Guide.

Acknowledgments

This library draws inspiration from similar projects such as react-keycloak.

For any inquiries or suggestions regarding React and React Native projects, reach out for collaboration.