# Authentication and loading messages

Authentication messages tell you which authentication form is open or whether the
application is still resolving authentication. Use this page when you are choosing
between **Sign in** and **Sign up**, waiting for the authentication state, or interpreting the
header while authentication is temporarily unavailable.

| If you need to… | Go to |
|---|---|
| Enter credentials for an existing account | [**Sign in**](doc:sign-in) |
| Create an account | [Create an account](doc:create-an-account) |
| Understand loading or unavailable states | [Loading and unavailable states](doc:loading-and-unavailable-states) |
| Resolve an authentication error | [General error messages](doc:general-error-messages) |
| Find broader troubleshooting guidance | [Common issues and solutions](doc:common-issues-and-solutions) |

## Before you start

You can use the authentication forms at `/login` and `/register`. The forms ask for
the information in this table.

| Form | Information |
|---|---|
| **Sign in** | **Email** and **Password** |
| **Sign up** | **Username**, **Email**, and **Password** |
| Both forms | The form's submit action is **Sign in** or **Sign up**, according to the route |

Have the information for the selected form ready before you open it.

## Open the authentication form

Use the form that matches what you need to do. The authentication page provides a link
to the other form so you can change your choice without using the browser address bar.

Steps

1. Choose one option:

   | If you need to… | Select |
   |---|---|
   | Enter credentials for an existing account | **Sign in** |
   | Create a new account | **Sign up** |

2. Change forms when needed:

   | If you are on… | Select to change forms |
   |---|---|
   | **Sign in** | **Need an account?** |
   | **Sign up** | **Have an account?** |

**Result:** The selected authentication form is on screen.

## Understand the form

**Sign in** is the form for an existing account. **Sign up** is the form for creating an
account. The route determines which form-specific field and submit label appear.

| On the form | Fields | Submit action |
|---|---|---|
| **Sign in** | **Email**, **Password** | Select the **Sign in** button |
| **Sign up** | **Username**, **Email**, **Password** | Select the **Sign up** button |

The **Username** field belongs to **Sign up**. **Sign in** uses **Email** and
**Password**. The form requires **Email** and **Password** on both routes, and
**Username** on **Sign up**.

The submit action is disabled while the form is invalid. During submission, the form
fields are disabled until the request finishes.

With the correct form and information identified, continue to the submission steps.

## **Sign in** or create an account

Complete the form that matches your route. Use **Sign in** for an existing account and
**Sign up** for a new account.

Prerequisites

- You are on the correct form.
- You have the information required by that form.

Steps

1. Enter the account details for your form:

   | If you are on… | Enter… |
   |---|---|
   | **Sign in** | The account email in **Email** and the account password in **Password** |
   | **Sign up** | The new account name in **Username**, the account email in **Email**, and the account password in **Password** |

2. Submit the form:

   | If you are on… | Select |
   |---|---|
   | **Sign in** | Select the **Sign in** button |
   | **Sign up** | Select the **Sign up** button |

**Result:** After successful authentication, the application navigates to the home
route.

## When a message appears

The header uses short messages while authentication is being resolved or temporarily
unavailable.

| Message | Meaning |
|---|---|
| `Loading...` | Authentication state is loading. |
| `Auth unavailable - retrying automatically` | Authentication is temporarily unavailable and retrying automatically. |
| `Connecting...` | The header is showing the temporary unavailable state. |

If an authentication request returns an error, the authentication page displays the
returned error values in its error area and allows submission again.

Use the message that appears while the request is resolving to decide what to do next.

## Continue from authentication

After successful authentication, continue on the home route. For the task-specific
steps, use [**Sign in**](doc:sign-in) or [Create an account](doc:create-an-account).
For state messages, use [Loading and unavailable states](doc:loading-and-unavailable-states).
For error guidance, use [General error messages](doc:general-error-messages) and
[Common issues and solutions](doc:common-issues-and-solutions).