Implementing OAuth2

Written — Updated
  • For each supported provider (Github, Twitter, etc.) you need to create an application with that provider in order to do OAuth2, even if all you want to do is authenticate.
  • To login, open a new window pointing to a local endpoint.
    • Also add a message handler to know when the login is done
      • const loginWindow = window.open(
         `/user/login/${provider}`,
         'oauthLogin',
         'width=600,height=400'
            );
            if (loginWindow) {
         window.addEventListener('message', function handler(event) {
           loginWindow.close();
           window.removeEventListener('message', handler);
           invalidate('/user');
         });
            }
        
      • This one closes the window and tells SvelteKit to reload the user data.
  • That endpoint should redirect to the authorization URL at the provider for your app.
  • The OAuth callback is then another app endpoint that handles the code
    • If the user hasn't logged in before, create a new one.
    • Fetch the user metadata and optionally update it if needed
    • Create a new session, create the session cookie, etc.
    • Finally, return some a small <script> snippet that talks back to the original app's handler and tells it the login is done.
    •   return {
      headers: {
        'Set-Cookie': cookie,
        'Content-Type': 'text/html; charset=utf-8',
      },
      body: `
       <script>
         window.opener.postMessage({
           success: true
         }, window.location.origin);
       </script>
      `,
        };
      

Thanks for reading! If you have any questions or comments, please send me a note on Twitter or Mastodon.