Search for a command to run...
Chapter 9 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
Senior Frontend Dev. Mostly Angular and Svelte. I will be sharing my day-to-day learning experiences here with the community.
No comments yet. Be the first to comment.
Implement secure authentication in SvelteKit effortlessly with SvelteKitAuth. Streamline OAuth integration, manage sessions, and customize flows with ease, ensuring robust user security and seamless experiences across your applications.
Chapter 10 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
Chapter 15 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
Chapter 14 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
Chapter 13 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
Chapter 12 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
Chapter 11 of Comprehensive Guide to SvelteKitAuth: Secure Authentication for SvelteKit Apps
In previous articles, we explored how to sign out users from both the client-side and server-side. In this article, we will delve into the differences between signing out a user from the Application layer versus the OAuth layer.
When you trigger a signOut(), SvelteKitAuth logs the user out from your application by clearing the session-token cookie and resetting the Session to null. However, the user is still active in the OAuth provider's session layer. You can read more about this in the official Auth0 documentation, and this holds true for all OAuth providers.
You can verify the above statement in the following way:
If you log in for the very first time using signIn(), you'll see a pop-up from your OAuth provider for credentials.
Now log out using signOut(). Verify that the session-token and the Session are nullified.
Log in again with signIn(). This time, you won't see any pop-up asking for credentials; instead, you will be auto-logged in the moment you press the sign-in button!
This proves that the user session was still active in the Auth0 session layer. If you want to clear the user session on Auth0's session layer as well, you will have to log out the user from Auth0 using the OIDC endpoint.
<!-- src/routes/logout/+page.svelte file -->
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/stores';
onMount(async () => {
const idToken = $page.data?.session?.user.id_token as string;
window.location.href =
import.meta.env.VITE_ISSUER +
`oidc/logout?post_logout_redirect_uri=${encodeURIComponent(
window.location.origin
)}&id_token_hint=${idToken}`;
});
</script>
The above code snippet showcases one of the many ways to log out users from the Auth0 session layer.
We need to do one more configuration in our Auth0 application. We need to add the URL to the Allowed Logout URLs option. I always redirect users to the home page, so I've given the URL of my root page. If you wish to redirect the user to any other page, that URL must be whitelisted here.
In this article, we explored the differences between signing out a user from the Application layer and the OAuth layer. We demonstrated how SvelteKitAuth handles user sign-out by clearing the session token and resetting the session, while the OAuth provider's session remains active. We also provided a method to log out users from the OAuth provider's session layer using the OIDC endpoint and highlighted the importance of configuring the Allowed Logout URLs in Auth0. Understanding these differences and configurations ensures a more secure and seamless user experience.
Here is the link to the GitHub repository with the codebase. In the next section, we will delve into managing sessions within the application.