Yml Settings

🪪 auth.yml

# Introduction

The auth.yml file is essential for configuring Unauthorized layout and pages, specifying your login page forms, allowing registration or forgot password, and other configuration options as well.

# Overview

This section provides a detailed breakdown of the components within the auth.yml file, explaining how the internal @tanglemedia packages utilize this configuration.

Here is an example of the auth.yml file:

        default: 'credentials'

providers:
  credentials:
    adapter: 'directus'
    http:
      method: 'POST'
      url: '/login'

ui:
  layout:
    mode: '2-columns'
    feature:
      leftSide:
        # backgroundColor: '#02B9C3'
      rightSide:
        # backgroundColor: '#F06221'
      logo: ''
      opacity: 50
      logoClass: ''
      filterClass: ''
      imageClass: ''
      overlayImageClass: ''

    login:
      title: 'Log in'
      redirect:
        success: '/dashboard'
        error: '/login'

    registration:
      enabled: true
      title: 'Create an account'
      passwordStrength:
        minLength: 8
        requireNumber: false
        requireCapitalLetters: false
        requireSpecialCharacters: false

    forgotPassword:
      enabled: true
      title: 'Forgot your password'

      

# Breakdown

Let's break down each piece of the yml file, so that we can better understand what happens when the internal @tanglemedia packages read from this file.

# Default

• Description: [To Be Determined]

# Providers

• Description: [To Be Determined]

# UI

This configuration object is responsible for the UI layout and configuration of your unauthorized routes.

# Layout

# Mode

This let's you choose between 1-columns or 2-columns layout for your unauthorized routes.

• 1-columns configuration separates the screen in 1 column, and the content will be placed in the middle.
• 2-columns configuration separates the screen in 2 column, and the content will be placed in the right side of the screen.

For more information check out the Auth Package.

# Feature

This let's you change some aspects of your unauthorized layout. The aspects are:

• leftSide.backgroundColor: You can pass a hex color value and the background color of the left side of the layout will change to that value.
• rightSide.backgroundColor: You can pass a hex color value and the background color of the right side of the layout will change to that value.
• opacity: This will change how much opacity there is between the background image and color and the logo image. Default is 50.
• logoClass: This will accept tailwind css classes and it will append them to the logo image container classes.
• filterClass: This will accept tailwind css classes and it will append them to the opacity container classes.
• imageClass: This will accept tailwind css classes and it will append them to the background image container classes.
• overlayImageClass: This will accept tailwind css classes and it will append them to the overlay image container classes.

For more information check out the Auth Package.

# Login

This let's you configure basic aspects of your login form, and actions. The aspects are:

• title: This is the title of your login page, this title will be displayed by default on your <AuthCard> component.
• redirect.success: The user will be redirected to this route when the login action is successful.
• redirect.error: The user will be redirected to this route when the login action is failed.

For more information check out the Auth Package.

# Registration

This let's you configure basic aspects of your register form, and actions. The aspects are:

• enabled: This will display the register link and the form.
• title: This is the title of your register page, this title will be displayed by default on your <AuthCard> component.
• Password Strength Configuration:

For more information check out the Auth Package.

# Forgot Password

This let's you configure basic aspects of your forgot password form, and actions. The aspects are:

• enabled: This will display the forgot password link and the form.
• title: This is the title of your forgot password page, this title will be displayed by default on your <AuthCard> component.

For more information check out the Auth Package.