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 doneconst 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.
- Also add a
- 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.