Production-ready React authentication components for Google OAuth and Email OTP
npm install atozas-react-auth-kit@react-oauth/google
useAuth() hook
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}
);
}
`
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.