React login page
npm install login-page-reactjsA customizable React login page component built with Ant Design, supporting both email/password and Microsoft SSO authentication.
- 🎨 Fully customizable styling
- 📱 Responsive design
- 🔐 Multiple authentication methods
- ⚛️ Built with React and Ant Design
- 📦 TypeScript support
``bash`
npm install react-login-page-componentor
yarn add react-login-page-component
``
use npm i --legacy-peer-deps
`tsx
import { LoginPage } from 'react-login-page-component';
function App() {
const handleEmailLogin = (values) => {
console.log('Email login:', values);
};
const handleSSOLogin = () => {
console.log('Microsoft SSO login clicked');
};
return (
imageSrc="/path/to/your/image.png"
showSSOLogin={true}
showEmailLogin={true}
onEmailLogin={handleEmailLogin}
onSSOLogin={handleSSOLogin}
/>
);
}
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | 'Welcome Back' | Title displayed on the login page |imageSrc
| | string | Required | Path to the image displayed on the left side |imageAlt
| | string | 'Login illustration' | Alt text for the image |showSSOLogin
| | boolean | true | Whether to show Microsoft SSO login option |showEmailLogin
| | boolean | true | Whether to show email/password login form |containerStyle
| | React.CSSProperties | undefined | Custom styles for the main container |imageStyle
| | React.CSSProperties | undefined | Custom styles for the image |formContainerStyle
| | React.CSSProperties | undefined | Custom styles for the form container |onEmailLogin
| | (values: { email: string; password: string }) => void | undefined | Callback function for email/password login |onSSOLogin
| | () => void | undefined | Callback function for Microsoft SSO login |
`tsx`
containerStyle={{
backgroundColor: '#e6f7ff'
}}
/>
`tsx`
imageStyle={{
maxWidth: '80%',
maxHeight: '500px'
}}
/>
`tsx`
formContainerStyle={{
backgroundColor: 'white',
borderRadius: '8px',
padding: '32px'
}}
/>
The component provides a form with email and password fields. The onEmailLogin callback receives an object with the following structure:
`typescript`
{
email: string;
password: string;
}
The Microsoft SSO login button triggers the onSSOLogin` callback when clicked. You can implement your Microsoft authentication logic within this callback.
- React >= 16.8.0
- React DOM >= 16.8.0
- Ant Design >= 5.0.0
MIT