How to Add Authentication to Any App in 5 Minutes

Authentication seems simple: register a user, verify their password, give them a token. In practice, it involves:

- Secure password hashing (bcrypt, scrypt, or Argon2) - Token generation and validation (JWT or session-based) - Token refresh and expiration handling - Password reset flows with email verification - Account lockout after failed attempts - CSRF protection - Secure cookie management - OAuth integration for social login - Rate limiting on auth endpoints to prevent brute force

Getting any of these wrong creates security vulnerabilities. Building all of them correctly takes days or weeks, even for experienced developers.

Instead of implementing auth yourself, use an API that handles it. With ShipStack, authentication is four endpoints:

Register: POST /api/auth/register with { email, password } — creates a user and returns a session token.

Login: POST /api/auth/login with { email, password } — validates credentials and returns a token.

Logout: POST /api/auth/logout with the Authorization header — invalidates the session.

Password Reset: POST /api/auth/reset-password with { email } — sends a reset email.

The underlying provider (Supabase Auth or Firebase Auth) handles password hashing, token management, email delivery, and rate limiting. You just make HTTP requests.

Here's how auth works in a React app:

1. Create a login form with email and password fields. 2. On submit, call fetch('https://api.shipstack.codes/api/auth/login', { method: 'POST', body: JSON.stringify({ email, password }) }). 3. Store the returned token (in memory, localStorage, or a cookie depending on your security requirements). 4. Include the token in all subsequent API calls: Authorization: Bearer YOUR_TOKEN. 5. On logout, call the logout endpoint and clear the stored token.

The same pattern works in Vue, Svelte, Angular, React Native, Flutter, or any framework that can make HTTP requests. No SDK installation required.

Social login (Sign in with Google, GitHub, Discord, etc.) works through your underlying provider. Configure OAuth providers in your Supabase or Firebase dashboard, then initiate the flow through ShipStack's auth endpoint.

The OAuth redirect flow works as follows: 1. Your frontend redirects to the provider's OAuth URL. 2. The user authenticates with the social provider. 3. The provider redirects back to your app with an auth code. 4. Your app exchanges the code for a session token through ShipStack's API.

ShipStack normalizes the token format so your app doesn't need to know whether the user signed in with email/password or OAuth — the session token works the same either way.

Once your basic auth flow works, add these production hardening steps:

1. Store tokens securely. HttpOnly cookies are more secure than localStorage for web apps. For mobile apps, use the platform's secure storage (Keychain on iOS, EncryptedSharedPreferences on Android).

2. Implement token refresh. Access tokens should expire quickly (15-60 minutes). Use refresh tokens to get new access tokens without forcing re-login.

3. Add loading states. Check auth status on app initialization. Show a loading spinner while verifying the token, then redirect to login if it's invalid.

4. Protect routes. Use middleware or route guards to prevent unauthenticated access to protected pages.

5. Handle errors gracefully. Show clear error messages for invalid credentials, expired sessions, and network failures.

With ShipStack handling the backend security (password hashing, rate limiting, token management), you can focus on the user experience rather than cryptographic details.