Client-side Authentication

Registering Users

User registration follows the flow:

User registers -> Confirmation Email Sent -> Auth Middleware Redirects to Verify Email Page -> User Verifies Email -> User is directed to /app

Logging In

Registered users can log in, but if their email is not verified, they will be redirected to the Verify Email page. This page also has the option to resend the verification email if it was not received. Read more about how to configure emails here.

Forgot Password

If users forget their password, they can request a password reset email. This email will contain a link to reset the password. The link is valid for 1 hour. The user will be redirected to the login page after the password is reset.

Updating Profile

Users can update their profile information, this page lives in /app/settings/account, in the Nuxt config a redirect is set up from /app/settings to this page. When a user updates their email, they need verify it both on their current email and the new email.

Updating Password

Users can update their password, this page lives in /app/settings/security. The user must enter their current password to update it.

The user store

The application uses Pinia for state management, the User store is located in stores/user.ts. The current API for the store is: You can use the user store anywhere in the app by calling useUserStore().

type UserStore {
    user: Ref<User | null>
    setUser: (newUser: User) => void
    login: (payload: LoginPayload, opts?: { next?: string }) => Promise<void>
    register: (payload: RegisterPayload) => Promise<void>
    sendVerificationEmail: () => Promise<void>
    sendPasswordResetEmail: (email: string) => Promise<void>
    resetPassword: (payload: ResetPasswordPayload) => Promise<boolean>
    updateProfile: (data: UpdateProfilePayload) => Promise<void>
    changePassword: (payload: ChangePasswordPayload) => Promise<void>
    logout: () => Promise<void>
}

Note, do not destructure the object, otherwise you'll lose reactivity

// Don't do this
const { user, setUser } = useUserStore()

// Do this
const userStore = useUserStore()