atozas-react-auth-kit

Production-ready React authentication components for Google OAuth and Email OTP. Drop-in components with beautiful UI.

Features

- 🎨 Beautiful UI - Clean, modern components with minimal CSS
- 🔐 Google OAuth - One-tap login with @react-oauth/google
- 📧 Email OTP - Passwordless authentication
- 🔄 Auto Token Refresh - Axios interceptors handle expired tokens
- 💾 Flexible Storage - Memory or localStorage for tokens
- 🪝 React Hooks - Simple useAuth() hook
- 📦 TypeScript - Full type definitions
- ⚡ Zero Config - Works out of the box

Installation

``bash
npm install atozas-react-auth-kit
`

Quick Start

`tsx
import { AuthProvider, useAuth, GoogleLoginButton, EmailOtpLogin } from 'atozas-react-auth-kit';
import 'atozas-react-auth-kit/styles.css';

// Wrap your app
function App() {
return (
apiUrl="http://localhost:3000/api/auth"
googleClientId={process.env.REACT_APP_GOOGLE_CLIENT_ID!}
enableLocalStorage={true}
>


);
}

// Login page
function LoginPage() {
const { isAuthenticated } = useAuth();

if (isAuthenticated) {
return ;
}

return (

Welcome

onSuccess={() => console.log('Logged in!')}
/>

OR

onSuccess={() => console.log('Logged in!')}
/>

);
}

// Use auth in any component
function Dashboard() {
const { user, logout } = useAuth();

return (

Welcome {user?.name || user?.email}

Logout

);
}
`

Components

$3

Wraps your app and provides authentication context.

`tsx
apiUrl="http://localhost:3000/api/auth"
googleClientId="YOUR_GOOGLE_CLIENT_ID"
enableLocalStorage={true}
onAuthError={(error) => console.error(error)}
>
{children}

`

Props:
- apiUrl (required): Your backend auth endpoint
- googleClientId (required): Google OAuth client ID
- enableLocalStorage (optional): Store tokens in localStorage (default: false)
- onAuthError (optional): Callback for auth errors

$3

Google OAuth login button.

`tsx
text="Continue with Google"
onSuccess={() => navigate('/dashboard')}
onError={(error) => console.error(error)}
className="custom-class"
/>
`

Props:
- text (optional): Button text (default: "Continue with Google")
- onSuccess (optional): Callback on successful login
- onError (optional): Callback on error
- className (optional): Additional CSS classes

$3

Email OTP login form.

`tsx
onSuccess={() => navigate('/dashboard')}
onError={(error) => console.error(error)}
className="custom-class"
/>
`

Props:
- onSuccess (optional): Callback on successful login
- onError (optional): Callback on error
- className (optional): Additional CSS classes

Hooks

$3

Access authentication state and methods.

`tsx
const {
user, // Current user object
isAuthenticated, // Boolean auth status
isLoading, // Initial loading state
accessToken, // Current access token
login, // Login function (handled by components)
logout, // Logout function
refreshToken, // Manual token refresh
} = useAuth();
`

User Object:
`typescript
interface User {
id: string;
email: string;
name?: string;
picture?: string;
provider: 'google' | 'email';
}
`

API Client

Use the pre-configured axios client for authenticated requests:

`tsx
import { apiClient } from 'atozas-react-auth-kit';

// In your component
const fetchUserData = async () => {
const response = await apiClient.get('/user/profile');
return response.data;
};
`

The client automatically:
- Adds access token to requests
- Refreshes token on 401 errors
- Retries failed requests with new token

Custom Styling

Import the default styles:

`tsx
import 'atozas-react-auth-kit/styles.css';
`

Or override with your own CSS:

`css
.auth-button {
background-color: #your-color;
}

.form-input {
border-color: #your-color;
}
`

CSS Classes:
- .google-button - Google login button
- .email-otp-login - Email OTP container
- .auth-form - Form container
- .form-input - Input fields
- .auth-button - Primary buttons
- .auth-button-secondary - Secondary buttons
- .auth-error - Error messages
- .auth-success - Success messages

Protected Routes

`tsx
import { useAuth } from 'atozas-react-auth-kit';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
const { isAuthenticated, isLoading } = useAuth();

if (isLoading) {
return

Loading...

;
}

if (!isAuthenticated) {
return ;
}

return children;
}

// Usage



} />
`

TypeScript

Full TypeScript support:

`typescript
import type { User, AuthState, AuthContextValue } from 'atozas-react-auth-kit';

const MyComponent: React.FC = () => {
const auth: AuthContextValue = useAuth();
const user: User | null = auth.user;

// ...
};
`

Advanced Usage

$3

`tsx
const { refreshToken } = useAuth();

const handleRefresh = async () => {
const newToken = await refreshToken();
if (newToken) {
console.log('Token refreshed!');
} else {
console.log('Refresh failed');
}
};
`

$3

`tsx
import { apiClient } from 'atozas-react-auth-kit';

// The client handles auth automatically
const updateProfile = async (data) => {
const response = await apiClient.put('/user/profile', data);
return response.data;
};

const uploadFile = async (file) => {
const formData = new FormData();
formData.append('file', file);

const response = await apiClient.post('/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});

return response.data;
};
`

Examples

Check the examples/mern-demo` folder for a complete working example.

License

MIT