Skip to main content

Overview

Crocante uses a secure session-based authentication system with HttpOnly cookies managed by the backend-for-frontend (BFF) architecture. This guide covers logging in, registering new accounts, and managing session expiry.

Logging In

Access the Login Modal

When you first visit Crocante or when your session expires, you’ll be prompted with the login modal.
1

Enter Your Credentials

Provide your username and password in the login form. The platform uses the useLogin hook from services/hooks/mutations/use-login to authenticate your credentials.
2

Submit Login

Click the Log in button to authenticate. Your credentials are securely sent to the backend, and an HttpOnly session cookie is created upon successful authentication.
3

Alternative: Mock Data

For demo purposes, you can click Continue w/mock data to explore the platform with sample data using the useMock mutation.
The session is managed entirely through HttpOnly cookies, which cannot be accessed by JavaScript, providing enhanced security against XSS attacks.

Registering a New Account

Multi-Step Registration Process

Crocante requires a comprehensive KYC (Know Your Customer) process for compliance. The registration involves 5 steps:
1

Create Account

Click Register new account from the login modal. Enter your desired username, email, and password in the account creation form.
2

Verify Email (OTP)

After submitting your account details, you’ll receive a one-time password (OTP) via email. Enter the OTP code to verify your email address.
If you don’t receive the OTP, you can click Resend to request a new code.
3

Personal Information

Provide your personal details including:
  • Full legal name
  • Date of birth
  • Residential address
  • Phone number
  • Nationality
4

Assets Origin

Declare the origin of your assets and confirm whether you are a politically exposed person (PEP). This information is required for regulatory compliance.
5

KYC Documents

Upload the required KYC documents:
  • Government-issued ID (passport, driver’s license, or national ID)
  • Proof of address (utility bill, bank statement, or lease agreement)
  • Selfie with ID (for identity verification)
Once all documents are uploaded, your account will be submitted for review.
Account approval may take 1-3 business days depending on verification queue. You’ll receive an email notification when your account is approved.

Session Management

Session Expiry Warning

Crocante automatically monitors your session using the SessionExpiryManager component and useSessionExpiry hook located in:
  • context/session-expiry-manager.tsx
  • hooks/use-session-expiry.ts
1

Automatic Monitoring

When you’re signed in, the platform continuously monitors your session expiration time by checking /api/auth/session.
2

Expiry Warning

30 seconds before your session expires, a modal appears showing a countdown timer and the remaining time.
Your session will expire in 25 seconds. Renew to stay signed in.
3

Renew Session

Click Renew session to extend your session without losing your work. The platform sends a request to /api/auth/renew to refresh your session cookie.
4

Session Expired

If the countdown reaches zero without renewal, the session expiry modal closes and the login modal appears, requiring you to log in again.

Session Provider Context

The SessionProvider component (context/session-provider.tsx) manages your authentication state throughout the application:
  • User Data Polling: Automatically polls /api/user/me at regular intervals to keep user data fresh
  • Auth Expired Events: Listens for auth-expired browser events to handle session termination
  • Automatic Logout: Clears local storage and query cache when sessions expire
The useSession() hook provides access to:
  • isSignedIn: Boolean indicating authentication status
  • user: Current user object with profile data
  • isLoading: Loading state during authentication checks
  • logout(): Function to manually log out

Best Practices

Keep Sessions Active

If you’re actively working, click Renew session when prompted to avoid losing unsaved work.

Secure Logout

Always log out when using shared or public computers to protect your account.

Strong Passwords

Use unique, complex passwords with a combination of letters, numbers, and symbols.

Verify Email

Ensure your email address is up to date to receive OTP codes and important notifications.

Troubleshooting

Can’t Log In

  • Verify your username and password are correct (passwords are case-sensitive)
  • Check if your account has been approved after registration
  • Try clearing your browser cache and cookies

Not Receiving OTP

  • Check your spam/junk folder
  • Verify the email address you provided during registration
  • Use the Resend button to request a new OTP code
  • Contact support if issues persist

Session Keeps Expiring

  • Check your internet connection stability
  • Ensure cookies are enabled in your browser
  • Disable browser extensions that might interfere with cookies
  • Try using a different browser

Managing Assets

Learn how to view and manage your digital asset portfolio

Deposit & Withdrawal

Fund your account and withdraw assets

Build docs developers (and LLMs) love