Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storage gets cleared everyday with persistant storage using custom storage class (Angular) #1327

Open
2 tasks done
kewur opened this issue Dec 8, 2024 · 3 comments
Open
2 tasks done
Labels
bug Something isn't working

Comments

@kewur
Copy link

kewur commented Dec 8, 2024

Bug report

  • I confirm this is a bug with Supabase, not with my own application.
  • I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

We are using Angular SSR alongside supabseJs for authentication. This works fine using cookie storage. However, the next day the users are required to log back in again as the storage is disregarded. This logic works fine if we don't use SSR and just go with the default implementation of supabasejs.

On a similar but unrelated note, setting a custom key also breaks authentication for us, so we use it without a custom key, idk how related that is to the issue, but thought it might be helpful.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

create a new angular project, use this service for supabase

import { Injectable } from '@angular/core';
import { SsrCookieService } from 'ngx-cookie-service-ssr';
import { SupportedStorage } from '@supabase/supabase-js';

// noinspection JSUnusedGlobalSymbols
@Injectable({
  providedIn: 'root',
})
export class SupabaseStorageService implements SupportedStorage {
  constructor(private readonly cookieService: SsrCookieService) {}

  getItem(key: string): string | Promise<string | null> | null {
    return this.cookieService.get(key);
  }

  setItem(key: string, value: string): void | Promise<void> {
    this.cookieService.set(key, value);
  }

  removeItem(key: string): void | Promise<void> {
    this.cookieService.delete(key);
  }
}

initialize by adding this service.

import { Injectable } from '@angular/core';
import {
  AuthChangeEvent,
  AuthSession,
  createClient,
  Session,
  SupabaseClient,
  User,
} from '@supabase/supabase-js';
import { SupabaseStorageService } from './auth/supabase-storage.service';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private readonly supabase: SupabaseClient;

  constructor(
    private readonly supabaseStorage: SupabaseStorageService
  ) {
    this.supabase = this.initializeSupabase();
  }

  private initializeSupabase(): SupabaseClient {
    return createClient(environment.supabaseUrl, environment.supabaseKey, {
      auth: {
        persistSession: true,
        autoRefreshToken: true,
        // if you set the storage key, ssr login will not work
        storage: this.supabaseStorage,
      },
    });
  }

  authChanges(callback: (event: AuthChangeEvent, session: Session | null) => void) {
    return this.supabase.auth.onAuthStateChange(callback);
  }

  signIn(email: string, password: string) {
    return this.supabase.auth.signInWithPassword({ email, password });
  }

  session() {
    return this.supabase.auth.getSession();
  }

  signOut() {
    return this.supabase.auth.signOut();
  }

  signUp(displayName: string, email: string, password: string) {
    return this.supabase.auth.signUp({
      email,
      password,
      options: {
        data: { 'display_name': displayName },
        emailRedirectTo: environment.redirectSignUp,
      },
    });
  }

  sendResetPasswordRequest(email: string) {
    const redirectTo = `${window.location.origin}/reset-password`;
    return this.supabase.auth.resetPasswordForEmail(email, {
      redirectTo: redirectTo,
    });
  }

  reinitialize() {
    return this.supabase.auth.initialize();
  }

  verifyToken(token: string) {
    return this.supabase.auth.exchangeCodeForSession(token);
  }

  async changeDisplayName(displayName: string) {
    return this.supabase.auth.updateUser({ data: { 'display_name': displayName } });
  }

  changePassword(newPassword: string) {
    return this.supabase.auth.updateUser({ password: newPassword });
  }
}

install the package

npm install ngx-cookie-service-ssr

Expected behavior

Users does not get logged out after a day

System information

  • OS: Debian 11
  • Browser Firefox
  • Version of supabase-js:
  • "@supabase/ssr": "^0.5.2",
    "@supabase/supabase-js": "^2.46.2",
  • Version of Node.js: v18.19.1
@kewur kewur added the bug Something isn't working label Dec 8, 2024
@kewur
Copy link
Author

kewur commented Dec 10, 2024

I believe refresh tokens in general isnt refreshing the auth session to begin with. I had left apage open for 2 hours and when I tried to execute something I got an unauthorized exception.

@kewur
Copy link
Author

kewur commented Dec 11, 2024

trying to get the user on app component's ngOnInit function with supabase.getUser returns this error the next day.

I can see the session in the cookies

ksnip_20241211-150345

error: AuthSessionMissingError: Auth session missing!

@kewur kewur changed the title Auth does not refresh tokens with persistant storage using custom storage class (Angular) Storage gets cleared everyday with persistant storage using custom storage class (Angular) Dec 13, 2024
@kewur
Copy link
Author

kewur commented Dec 16, 2024

today, I used a different path than the root website path, and the reauthentication worked. Going back to root, causes the login screen to show up again. will investigate further

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant