How to Create a Callback Page? (With @atproto/oauth-client-browser) #3412

hammouda101010 · 2025-01-19T23:56:29Z

hammouda101010
Jan 19, 2025

so uhh. tried to make one by myself and it sucks really bad. any guide or example of making a callback page?

here is my atempt at making one:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>OAuth Callback</title>
  </head>
  <body>
    <p id="auth_result">Processing authentication...</p>
  </body>
  <script>
    window.onload = function () {
      // Step 1: Get the query parameters from the search (URL)
      const queryParams = new URLSearchParams(window.location.search); // Get the query parameters

      if (queryParams) {
        // Step 2: Extract parameters: iss, state, and code
        const iss = queryParams.get('iss'); // The authorization server's URL (issuer)
        const state = queryParams.get('state'); // CSRF protection value (match with request state)
        const code = queryParams.get('code'); // Authorization code

        if (iss && state && code) {
          console.log('Issuer:', iss);
          console.log('State:', state);
          console.log('Authorization Code:', code);

          // Step 4: Send the data back to the parent window via postMessage
          window.opener.postMessage({ type: 'oauthCallback', iss, state, code }, '*');

          // Step 5: Close the popup window after sending the data
          window.close();
        } else {
          console.error('Missing parameters: iss, state, or code');
        }
      } else {
        console.error('No OAuth response query parameters found.');
      }
    };
  </script>
</head>
<body>
  <p id="auth_result">Processing OAuth Response...</p>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to Create a Callback Page? (With @atproto/oauth-client-browser) #3412

{{title}}

Replies: 0 comments

Select a reply

How to Create a Callback Page? (With @atproto/oauth-client-browser) #3412

hammouda101010 Jan 19, 2025

Replies: 0 comments

hammouda101010
Jan 19, 2025