# FaS Element
**Web component for easy passkey authentication integration** - Based on FaS Platform
FaS Element is a custom web component that provides a beautiful, Material-UI inspired UI for passkey authentication. Built specifically for the FaS Platform, it integrates seamlessly with your existing React applications and backend APIs.
## π Quick Start
### 1. Install
```bash
npm install @passkey-fas/element
```
### 2. Use in HTML (Proxy Mode - Recommended)
```html
My App
```
### 3. Use with React (Recommended for FaS Platform)
```jsx
import React from 'react';
import '@passkey-fas/element';
function AuthPage() {
const handleSuccess = (event) => {
const { type, user, token } = event.detail;
// Store token
localStorage.setItem('accessToken', token);
// Redirect to dashboard
window.location.href = '/dashboard';
};
const handleError = (event) => {
console.error('Auth error:', event.detail.message);
};
return (
);
}
export default AuthPage;
```
## ποΈ Backend Integration (Express.js)
FaS Element works best with your Express.js backend as a proxy:
```javascript
// server/routes/webauthn.js
const express = require('express');
const FaSSDK = require('@passkey-fas/webauthn-sdk');
const router = express.Router();
const fasSDK = new FaSSDK({
clientId: process.env.FAS_CLIENT_ID,
clientSecret: process.env.FAS_CLIENT_SECRET,
apiBase: 'https://fas-l450.onrender.com/api/webauthn'
});
// Proxy registration endpoints
router.post('/register/start', async (req, res) => {
try {
const options = await fasSDK.registerPasskey(req.body.email, req.body.fullname);
res.json(options);
} catch (error) {
res.status(400).json({ error: error.message });
}
});
router.post('/register/finish', async (req, res) => {
try {
const result = await fasSDK.verifyPasskeyRegistration(req.body);
res.json(result);
} catch (error) {
res.status(400).json({ error: error.message });
}
});
// Proxy authentication endpoints
router.post('/authenticate/start', async (req, res) => {
try {
const options = await fasSDK.authenticatePasskey(req.body.email);
res.json(options);
} catch (error) {
res.status(400).json({ error: error.message });
}
});
router.post('/authenticate/finish', async (req, res) => {
try {
const result = await fasSDK.loginWithPasskey(req.body);
res.json(result);
} catch (error) {
res.status(400).json({ error: error.message });
}
});
module.exports = router;
```
## ποΈ Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `client-id` | string | - | **Required** Your FaS project client ID |
| `api-url` | string | `/api/webauthn` | API base URL (should point to your backend proxy) |
| `use-proxy` | boolean | `true` | Use backend proxy (recommended for security) |
| `theme` | string | `material` | Theme name (currently supports Material-UI style) |
| `lang` | string | `vi` | Language code |
## πͺ Events
### `fas-success`
Fired when authentication is successful.
```javascript
authElement.addEventListener('fas-success', (event) => {
const { type, user, token } = event.detail;
// type: 'login', 'register', or 'quick-login'
// user: { id, email, fullname, lastLogin }
// token: JWT token string
// Store token for API calls
localStorage.setItem('accessToken', token);
// Redirect to protected route
window.location.href = '/dashboard';
});
```
### `fas-error`
Fired when an error occurs.
```javascript
authElement.addEventListener('fas-error', (event) => {
const { message } = event.detail;
console.error('Authentication error:', message);
// Show user-friendly error
alert(`Lα»i xΓ‘c thα»±c: ${message}`);
});
```
## π§ Methods
### `reset()`
Reset the element to initial login state.
```javascript
const authElement = document.querySelector('fas-element');
authElement.reset();
```
### `getAuthData()`
Get the current authentication data.
```javascript
const authData = authElement.getAuthData();
if (authData) {
console.log('User:', authData.user);
console.log('Token:', authData.token);
}
```
## π¨ Styling
FaS Element uses Material-UI inspired design with CSS custom properties:
```css
fas-element {
--primary-color: #1976d2;
--primary-hover: #1565c0;
--error-color: #d32f2f;
--success-color: #2e7d32;
--text-primary: rgba(0, 0, 0, 0.87);
--text-secondary: rgba(0, 0, 0, 0.6);
max-width: 400px;
}
```
## π Security
### Proxy Mode (Recommended)
```html
```
β
**Secure**: Client secret stays on your backend
β
**CORS-friendly**: No cross-origin issues
β
**Token handling**: Your backend manages JWT tokens
### Environment Variables
```bash
# .env
REACT_APP_FAS_CLIENT_ID=your-client-id
FAS_CLIENT_SECRET=your-client-secret # Backend only
```
## π οΈ Integration Examples
### With Material-UI Theme
```jsx
import { ThemeProvider, createTheme } from '@mui/material/styles';
import '@passkey-fas/element';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
},
});
function App() {
return (
);
}
```
### With React Router
```jsx
import { useNavigate } from 'react-router-dom';
function LoginPage() {
const navigate = useNavigate();
const handleSuccess = (event) => {
const { user, token } = event.detail;
localStorage.setItem('accessToken', token);
navigate('/dashboard');
};
return (
);
}
```
## π Browser Support
- β
Chrome 67+
- β
Firefox 60+
- β
Safari 14+
- β
Edge 18+
## π± Features
- **π Passkey Authentication** - Secure, passwordless login
- **π User Registration** - Create accounts with passkeys
- **β‘ Quick Login** - Login without typing email
- **π¨ Material Design** - Beautiful, responsive UI based on Material-UI
- **π§ React Integration** - Perfect for React applications
- **π‘οΈ Secure Proxy Mode** - Keep secrets on your backend
- **π Vietnamese Language** - Localized for Vietnamese users
- **π± Mobile Friendly** - Works on all devices
## π€ Contributing
We welcome contributions! Please see our project repository for details.
## π License
MIT License - see [LICENSE](LICENSE) file for details.
## π Support
- π§ Email: support@fas-platform.com
- π Website: https://fas-l450.onrender.com
- π Documentation: https://fas-l450.onrender.com/docs
---
**Made with β€οΈ by the FaS Team** - Passwordless authentication for everyone!