https://github.com/auth0-samples/auth0-acul-react-boilerplate
Auth0 ACUL React Boilerplate
https://github.com/auth0-samples/auth0-acul-react-boilerplate
Last synced: 15 days ago
JSON representation
Auth0 ACUL React Boilerplate
- Host: GitHub
- URL: https://github.com/auth0-samples/auth0-acul-react-boilerplate
- Owner: auth0-samples
- Created: 2024-12-06T05:25:05.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T12:00:43.000Z (2 months ago)
- Last Synced: 2025-04-12T20:52:44.195Z (15 days ago)
- Language: TypeScript
- Size: 141 KB
- Stars: 4
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Universal Login Boilerplate App
This boilerplate application helps you get started with building a customized login screen for Auth0 using React, TypeScript, and Vite. Universal Login offers a streamlined experience for users and does not require JavaScript for customization.
⚠ This boilerplate app is intended to be used alongside a technical documentation guide published [here](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started).
## Documentation
- [Quickstart](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/sdk-quickstart) - our guide for getting started with ACUL development.
- [ACUL JS SDK](https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-js) - The Auth0 ACUL JS SDK, integrated into this boilerplate for handling authentication flows.
## Getting Started
Follow these steps to get the application up and running locally:
### 1. Clone the Repository
```sh
git clone https://github.com/auth0/auth0-acul-react-boilerplate.git
cd auth0-acul-react-boilerplate
```
### 2. Install Dependencies
Install the dependencies:
```sh
npm install
```
### 3. Build the Application
```sh
npm run build
```
### 4. Serve the Application
After building the application, serve it locally using `http-server`:
```sh
cd dist
npx http-server dist -p 8080
```
This will start a local server on the specified port. Access the application by navigating to the link provided in the terminal.
### 5. Test the Application with Sample Quickstart
Go to your quickstart application and log in.
## How the Login Works
### Creating and Appending the Root Element
In the `src/main.tsx` file, create a `div` element and append it to the `body` of the document. This is necessary for the Universal Login to work correctly:
```tsx
const rootElement = document.createElement("div");
rootElement.id = "root";
document.body.appendChild(rootElement);
document.body.style.overflow = "hidden";
```
### Initializing Screen Objects
In the `src/screens/LoginId/index.tsx` file, initialize an object for the LoginId screen to manage the state and behavior specific to this screen:
```tsx
import { LoginId } from '@auth0/auth0-acul-js';
import { useState } from 'react';
export const LoginIdScreen = () => {
const loginManager = new LoginId();
const [email, setEmail] = useState('');
return (
setEmail(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
loginManager.login({ username: email })}
>
Continue
{loginManager.transaction.alternateConnections?.map(({ name, strategy }) => (
loginManager.socialLogin({ connection: name })}
>
Continue with {strategy}
))}
);
};
export default LoginIdScreen;
```
## Additional Information
- This project uses Vite for fast development and build processes.
- ESLint is configured to enforce code quality and consistency.
- SCSS is used for styling, focusing on modular and reusable styles.
For more details on customizing and extending this application, refer to the official documentation of the libraries and tools used:
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev/)
- [Auth0](https://auth0.com/)
### Have Fun with Your Own Coding Style!
Feel free to use your own coding style to create beautiful login pages. Customize the styles, add animations, and make the user experience delightful.