Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 1 addition & 14 deletions .github/GITHUB_ACTIONS.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,6 @@ default_screen_deployment_status:

**💡 Pro Tip**: Setting all screens to `false` will skip the entire build and upload process, making the pipeline complete quickly without using resources.

### `config/screen-to-prompt-mapping.js`

Maps custom screen names (directory names) to Auth0 prompt names. Example:

```javascript
export const screenToPromptMap = {
"login-id": "login-id", // Screen 'login-id' maps to Auth0 prompt 'login-id'
"mfa-sms-challenge": "mfa-sms", // Screen 'mfa-sms-challenge' maps to 'mfa-sms'
"passkey-enrollment": "passkeys",
};
```

### `config/context-configuration.js`

Defines which Auth0 context data (e.g., branding settings, client info) is available to custom screens. Example:
Expand Down Expand Up @@ -108,7 +96,6 @@ To use this deployment system in your own project:

1. Add your new screen's implementation (e.g., HTML, JS, CSS built by Vite) into a subdirectory within `src/screens/` (e.g., `src/screens/my-new-screen/`). Ensure your build process outputs these to `dist/assets/my-new-screen/`.
2. Update `config/deploy_config.yml` to include your new screen and set its deployment status (e.g., `my-new-screen: true`).
3. If your screen name doesn't directly map to an Auth0 prompt, add an entry to `config/screen-to-prompt-mapping.js`.
4. Deployment typically happens automatically on push to the configured branches (e.g., `main`) if the workflow is enabled.
3. Deployment typically happens automatically on push to the configured branches (e.g., `main`) if the workflow is enabled.

For detailed deployment instructions, refer to the `DEPLOYMENT.md` document (not included in this `.github` folder example).
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ npm install -g @auth0/auth0-cli
auth0 login

# Configure ACUL with settings file
auth0 ul customize --rendering-mode advanced --prompt login-id --screen login-id --settings-file ./settings.json
auth0 ul customize --rendering-mode advanced --prompt login-id --screen login-id --file ./settings.json
```

**About settings.json:** This file contains the same ACUL payload configuration as shown in the [Build Structure](#build-structure) section. It defines how Auth0 should load your custom screen assets, including CSS files, JavaScript bundles, and context configuration. The settings.json file structure is identical to the payload you'd use when configuring ACUL programmatically.
Expand Down
109 changes: 18 additions & 91 deletions react-js/.github/GITHUB_ACTIONS.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,6 @@ default_screen_deployment_status:

**Tip:** If all screens are set to `false`, the workflow skips building and uploading entirely, saving time and resources.

### `config/screen-to-prompt-mapping.js`

Maps your screen directory names to Auth0 prompt identifiers. Most screens map 1:1, but some need custom mappings:

```javascript
export const screenToPromptMap = {
"login-id": "login-id", // Direct mapping
"mfa-sms-challenge": "mfa-sms", // Custom mapping
"passkey-enrollment": "passkeys", // Custom mapping
};
```

### `config/context-configuration.js`

Defines what Auth0 data your screens can access (branding, user info, etc.):
Expand All @@ -57,74 +45,6 @@ export const contextConfig = [

## GitHub Actions

### `check-deployment-targets`

Runs first to check if any screens need deployment. This prevents wasting resources when nothing needs to be deployed.

**Outputs:**
- `has_targets` - `true` if at least one screen is enabled
- `target_count` - Number of enabled screens
- `target_screens` - JSON array of screen names to deploy

### `configure-auth0-screens`

The main deployment action, organized into these scripts:

- `action.yml` - Coordinates the overall deployment
- `scripts/utils.sh` - Helper functions for loading configs
- `scripts/setup-and-config.sh` - Validates environment and loads deployment settings
- `scripts/discover-assets.sh` - Finds and categorizes screen assets
- `scripts/process-screen.sh` - Processes individual screens and updates Auth0
- `scripts/generate-report.sh` - Creates a deployment summary

### `setup-auth0-cli`

Installs and authenticates the Auth0 CLI so the workflow can update your tenant.

### `upload-acul-to-s3`

Uploads built assets from the `dist` directory to your S3 bucket.

## When the Workflow Runs

The workflow triggers when:
- Code is pushed to the `main` branch
- You manually trigger it from the GitHub Actions tab

It will NOT run on pull requests or development branches.

## Required Secrets

Configure these in your GitHub repository under `Settings > Secrets and variables > Actions`:

| Secret | Example | What It's For |
|--------|---------|---------------|
| `AWS_S3_ARN` | `arn:aws:iam::123456789012:role/GitHubActions-ACUL` | IAM role for uploading to S3 |
| `S3_BUCKET_NAME` | `my-acul-assets` | Where to store the built files |
| `AWS_REGION` | `us-east-1` | AWS region of your bucket |
| `S3_CDN_URL` | `https://d1234abcdef.cloudfront.net` | Public URL for accessing assets |
| `AUTH0_DOMAIN` | `dev-mydomain.auth0.com` | Your Auth0 domain (must have custom domain) |
| `AUTH0_CLIENT_ID` | `abc123...` | M2M app client ID |
| `AUTH0_CLIENT_SECRET` | `secret123...` | M2M app client secret |

## Adding a New Screen

1. Create your screen in `src/screens/my-new-screen/`
2. Build your project - the screen will appear in `dist/assets/my-new-screen/`
3. Add it to `deploy_config.yml`:
```yaml
"my-new-screen": true
```
4. If needed, add a custom mapping in `screen-to-prompt-mapping.js`
5. Push to `main` - the workflow deploys automatically

For complete setup instructions including AWS and Auth0 configuration, see `DEPLOYMENT.md`.
"user.app_metadata.[keyName]", // Replace [keyName] with actual metadata key
];
```

## GitHub Actions

### Available Actions

#### `check-deployment-targets`
Expand Down Expand Up @@ -153,15 +73,23 @@ The main action uses a modular architecture with organized bash scripts:
- **`setup-auth0-cli`**: Installs and authorizes the Auth0 CLI for programmatic interaction with your Auth0 tenant.
- **`upload-acul-to-s3`**: Uploads the built ACUL assets from the `dist` directory to an AWS S3 bucket.

### Usage in Your Project
## When the Workflow Runs

The workflow triggers when:
- Code is pushed to the `main` branch
- You manually trigger it from the GitHub Actions tab

It will NOT run on pull requests or development branches.

## Usage in Your Project

To use this deployment system in your own project:

1. Copy the entire `.github` directory to your repository root.
2. Update the workflow file (`.github/workflows/acul-deploy.yml`) to match your project structure and desired triggers.
3. Configure the required secrets in your GitHub repository (`Settings > Secrets and variables > Actions`):
1. Copy the entire `.github` directory to your repository root.
2. Update the workflow file (`.github/workflows/acul-deploy.yml`) to match your project structure and desired triggers.
3. Configure the required secrets in your GitHub repository (`Settings > Secrets and variables > Actions`):

#### Required GitHub Secrets
### Required Secrets

| Secret Name | Sample Value | Description |
| --------------------- | -------------------------------------------------------------- | ------------------------------------------------------ |
Expand All @@ -173,13 +101,12 @@ To use this deployment system in your own project:
| `AUTH0_CLIENT_ID` | `abcdef123456789` | M2M application client ID for Auth0 Management API |
| `AUTH0_CLIENT_SECRET` | `your-m2m-secret-here` | M2M application client secret |

4. Modify the configuration files in `.github/config/` as needed for your deployment requirements.
4. Modify the configuration files in `.github/config/` as needed for your deployment requirements.

## Adding New Screens

1. Add your new screen's implementation (e.g., HTML, JS, CSS built by Vite) into a subdirectory within `src/screens/` (e.g., `src/screens/my-new-screen/`). Ensure your build process outputs these to `dist/assets/my-new-screen/`.
2. Update `config/deploy_config.yml` to include your new screen and set its deployment status (e.g., `my-new-screen: true`).
3. If your screen name doesn't directly map to an Auth0 prompt, add an entry to `config/screen-to-prompt-mapping.js`.
4. Deployment typically happens automatically on push to the configured branches (e.g., `main`) if the workflow is enabled.
1. Add your new screen's implementation into a subdirectory within `src/screens/` (e.g., `src/screens/my-new-screen/`). Ensure your build process outputs these to `dist/assets/my-new-screen/`.
2. Update `config/deploy_config.yml` to include your new screen and set its deployment status (e.g., `my-new-screen: true`).
3. Deployment typically happens automatically on push to the configured branches (e.g., `main`) if the workflow is enabled.

For detailed deployment instructions, refer to the `DEPLOYMENT.md` document (not included in this `.github` folder example).
For detailed deployment instructions, refer to `DEPLOYMENT.md`.
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,7 @@ set -euo pipefail

SCREEN_NAME="$1"

# Look up the prompt name for this screen
PROMPT_NAME=$(echo "$SCREEN_TO_PROMPT_MAP" | jq -r --arg screen "$SCREEN_NAME" '.[$screen] // $screen')

if [ "$PROMPT_NAME" == "null" ] || [ -z "$PROMPT_NAME" ]; then
echo "::warning::No prompt mapping found for screen '$SCREEN_NAME', using screen name as prompt"
PROMPT_NAME="$SCREEN_NAME"
fi

echo "Processing $SCREEN_NAME → $PROMPT_NAME"
echo "Processing $SCREEN_NAME"

# Discover assets using dedicated script
source ".github/actions/configure-auth0-screens/scripts/discover-assets.sh" "$SCREEN_NAME"
Expand Down Expand Up @@ -103,7 +95,7 @@ fi
AUTH0_OUTPUT=""
AUTH0_EXIT_CODE=0
set +e
AUTH0_OUTPUT=$(auth0 ul customize --rendering-mode advanced --prompt "$PROMPT_NAME" --screen "$SCREEN_NAME" --settings-file "$SETTINGS_FILE" 2>&1)
AUTH0_OUTPUT=$(auth0 acul config set "$SCREEN_NAME" --file "$SETTINGS_FILE" 2>&1)
AUTH0_EXIT_CODE=$?
set -e

Expand All @@ -112,7 +104,7 @@ if [ $AUTH0_EXIT_CODE -eq 0 ]; then
rm -f "$SETTINGS_FILE"; trap - ERR
exit 0
else
echo "::error::Failed to configure $PROMPT_NAME for screen $SCREEN_NAME (Exit Code: $AUTH0_EXIT_CODE)"
echo "::error::Failed to configure screen $SCREEN_NAME (Exit Code: $AUTH0_EXIT_CODE)"
echo "$AUTH0_OUTPUT"
rm -f "$SETTINGS_FILE"; trap - ERR
exit 1
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ source ".github/actions/configure-auth0-screens/scripts/utils.sh"
# LOAD CONFIGURATIONS
#############################################

SCREEN_TO_PROMPT_MAP=$(load_js_module ".github/config/screen-to-prompt-mapping.js" "screenToPromptMap")
export SCREEN_TO_PROMPT_MAP

CONTEXT_CONFIG=$(load_js_module ".github/config/context-configuration.js" "contextConfig")
export CONTEXT_CONFIG

Expand Down
131 changes: 0 additions & 131 deletions react-js/.github/config/screen-to-prompt-mapping.js

This file was deleted.

Loading
Loading