Replace OAuth 1.0 :

Architecture:

User
 │
 ▼
Client App  ── redirect ──> Authorization Server (Login & Consent)
 │                                   │
 │ <── Authorization Code ---------- │
 │
 ▼
Client App ── POST code --------> Token Endpoint
 │
 ▼
Access Token
 │
 ▼
Resource Server ── GET/POST API Calls

OAuth 2.0 Workflow:

  1. Register client app with Authorization Server (Twitter, Google, …).

  2. You’ll get:

  3. Client app send request to Authorization server:

    GET <https://authserver.com/oauth/authorize>
    ?response_type=code
    &client_id=YOUR_CLIENT_ID
    &redirect_uri=YOUR_REDIRECT_URI
    &scope=profile email
    &state=RANDOM_STRING // to prevent CSRF
    &code_challenge=CODE_CHALLENGE // hash of code_verifer (the random string in client app))
    &code_challenge_method=S256
    
  4. User login to the Authorization Server, accept permission to allow accessing the data on client app.

  5. Server then redirects back to client app, with AUTH_CODE (like request token, one time use) in query param:

    <https://yourapp.com/callback?code=AUTH_CODE&state=RANDOM_STRING>
    
  6. Client app makes a server-to-server POST request to the token endpoint:

    POST <https://authserver.com/oauth/token>
    Content-Type: application/x-www-form-urlencoded
    
    grant_type=authorization_code
    &code=AUTH_CODE
    &redirect_uri=YOUR_REDIRECT_URI
    &client_id=YOUR_CLIENT_ID
    &code_verifier=CODE_VERIFIER // the original random string
    
  7. Authorization server response:

    {
      "access_token": "eyJhbGciOi...",
      "token_type": "Bearer",
      "expires_in": 3600,
      "refresh_token": "xyz123",
      "scope": "profile email"
    }
    
  8. Client now calls the resource server using access token in header:

    GET/api/user/profile
    Authorization: Bearer eyJhbGciOi...