Implementing OAuth2

Written 2022-01-04 — Updated 2022-06-10

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>
`,
  };
```