Implementing Custom Authentication Solutions

Key Definitions

• JWT (JSON Web Token): A compact, URL-safe means of representing claims to be transferred between two parties.
• OAuth: An open standard for access delegation, commonly used as a way to grant websites or applications limited access to users' information without exposing passwords.
• Token-Based Authentication: A method where users receive a token upon successful login, which is used in subsequent requests to authenticate the user.

JWT Authentication Flow

1. User logs in with credentials (e.g., username/password).
2. Server validates credentials.
3. Server generates a JWT and sends it back to the client.
4. Client stores the JWT (e.g., localStorage).
5. Client includes JWT in the Authorization header for subsequent requests.

OAuth 2.0 Flow

1. User initiates authentication via OAuth provider (e.g., Google).
2. User is redirected to the provider's login page.
3. User grants permission to the application.
4. Provider redirects back with an authorization code.
5. Application exchanges the code for an access token.
6. Access token is used to access protected resources.

Step-by-Step Implementation

1. Set up an API endpoint for login.
2. Handle user input (username/password) on the front end.
3. Send a POST request with the credentials to the API.
4. Receive JWT from the server upon successful authentication.
5. Store the JWT in localStorage or sessionStorage.
6. Attach the JWT as an Authorization header in subsequent API requests.

Code Example

const login = async (username, password) => {
    const response = await fetch('https://api.example.com/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
    });

    if (response.ok) {
        const { token } = await response.json();
        localStorage.setItem('jwt', token);
    } else {
        console.error('Login failed');
    }
};