Acquiring an exclusive Navigator LockManager failed #936
Comments
|
Hi there, Paolo |
Thank you @Klunk75 for the workaround. For anyone who wants to fix it temporarily, add this below devDependencies in package.json and run |
|
Is this error just being logged, or is it actually creating a problem for you? |
Sorry for the late reply. I don't think I am facing any issue, it's just the errors being logged. |
|
In case you use |
|
seeing this with supabase 2.39.7, angular 17.2.1 |
|
Seeing this with supabase 2.39.7 // login.tsx
await supabase.auth.signInWithOAuth({
provider: "google",
});
// index.tsx
const session = await supabase.auth.getSession(); // session is null
Overriding gotrue-js to |
…gator LockManager Failed Error supabase/supabase-js#936
maybe you can merge that |
more information about the bug - supabase/supabase-js#936
|
I have tried the override approach, with gotrue version 2.61.1 and version 2.54.2, but still keep getting the same error as in the original post. Will this issue be resolved anytime soon or are there other alternatives to the workaround? Using angular 17.0.7 |
|
@vv001 the override worked for me with for and for |
|
Hi martheo, that did the trick. Thank you very much! |
|
@matheo your solution worked for me, thanks! |
|
@matheo - thanks! this worked for me and then I updated supabase for the signInAnonymously and now getting this error again, can you work your magic again for the latest @supabase/supabase-js 2.42.5? |
same bug.....want use |
|
I had the same issue as @aroman25 and @wszgrcy , and I've solved it using a patch. Let me preface by saying that I don't know the inner workings of Supabase at all, and I have not tested it thoroughly, so use it at your own risk. Basically, it just removes the navigatorLock parts, as that's seemingly causing the error. When using this, the override of the package version is no longer needed, besides pinning it to the patched version. |
|
Same problem with Angular |
|
It may be useful for others, for me it is working for me on Angular "dependencies": {
"@supabase/supabase-js": "2.43.1",
},
"devDependencies": {
"supabase": "^1.167.1",
},
"overrides": {
"@supabase/supabase-js": {
"@supabase/auth-js": "2.61.0"
}
},I just pasted what seemed relevant |
|
Any update on it? I have "@supabase/supabase-js": "^2.43.4" and auth-js is 2.64.2 and still having that issue:
|
|
I have the same problem with supabase-js 2.43.5 and angular 18.0.5 |
|
@macgors maybe this could fix your problem for me it's working on angular 18 with ssr but I need do a workaround on localhost (I'm not sure if this problem happens on https environment): my service @Injectable({
providedIn: 'root',
})
export class SupabaseService {
private supabase?: SupabaseClient
_session: AuthSession | null = null
constructor() {
this.createClient()
}
createClient() {
if (typeof window === 'undefined' || createClient === undefined) return
this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey)
}
categories() {
return this.supabase?.from('angular_test_categories').select(`id, name`)
}
}my package.json "dependencies": {
...
"@angular/core": "^18.0.0",
"@angular/ssr": "^18.0.7",
...
"@supabase/supabase-js": "2.39.2",
},
"overrides": {
"@supabase/supabase-js": {
"@supabase/gotrue-js": "2.61.0"
}
}, |
* override @supabase/auth-js dependency from v2.64.2 to v2.61.0 to resolve supabase/supabase-js#936 * update two way binding in profile visibility to work with angular 18 * redirect to /join if player is not authenticated within the game * remove logs * update console messages
|
Bumping, still can't get it to work even with overrides, Was on Angular 18 and downgraded to 17.3.8 per one of the comments above, but no luck. here's the loadout. "dependencies": {
"@supabase/supabase-js": "2.39.2",
},
"devDependencies": {
"supabase": "^1.167.1",
},
"overrides": {
"@supabase/supabase-js": {
"@supabase/gotrue-js": "2.61.0"
}
} |
|
Any plans on fixing this issue in near future? |
|
I am using Angular 18 and the issue still persist even after trying to fix using the above recommendations |
this temporary solution worked for me
|
|
FYI this is what resolved it for me with yarn. |
|
With Supabase 2.45.2 and Angular 18.2.1, the problem still persist.
This works, I hope it is a short time temporarily solution |
I tried all the alternatives here, but none of them worked for me, since I'm using the new feature called anonymous authentication, which prevents me from changing the resolutions for version 2.61.0. I had no time to test others versions |
|
Very annoying that this issue has been lying around for so long and is being ignored. createBrowserClient('', '', {
auth: { lock: (_, __, fn) => fn() }
}); |
|
Why doesn’t the Supabase team address these issues? The problem has been ongoing for quite some time. I love Supabase, but I’m also a big fan of Angular. It's disappointing that the Angular community doesn’t seem to be a priority for Supabase. |
|
I would also like this issue to get some love. |
It's sad to see most of the new players treating Angular as a second class citizen when it's megaparsecs superior to React in almost every aspect |
I'm using the version 2.44.4 on Angular 18 and it's working without override package.json |
It's sad indeed, but Angular is not megaparsecs superior to React in almost every aspect. The verbosity of Angular is a big drawback imho. You have to double imports things such as components, enum and so on when you need to use them inside your components.. You have to add to every component So no, Angular is not megaparsecs superior to React in almost every aspect. |
|
I am currently using the following solution to overcome this issue using Angular 18 with SSR, maybe it will help someone. supabase.service.ts @Injectable({ providedIn: 'root' })
export class SupabaseService {
private _initFinished$ = new ReplaySubject<void>(1);
readonly initFinished$ = this._initFinished$.asObservable();
public client!: SupabaseClient;
initClient() {
this.client = createClient(<...>);
this._initFinished$.next();
}
}auth.service.ts @Injectable({ providedIn: 'root' })
export class AuthService {
private readonly supabaseService = inject(SupabaseService);
constructor() {
this.supabaseService.initFinished$.pipe(first()).subscribe(() => {
this.supabaseService.client.auth.getSession().then(({ data }) => {
<...>
});
});
}app.component.ts @Component({ ... })
export class AppComponent {
private readonly supabaseService = inject(SupabaseService);
constructor() {
afterNextRender(() => {
this.supabaseService.initClient();
});
}
} |
There's someone yapping around. Angular has put a strong focus on being backwards compatible. That's why deprecated methods/fields still exist. The same applies to styleUrls and styleUrl. In react you have to add a library for every little thing. in the end you have a fat dependency on different maintainers. a render() method? angular is very different from react because e.g. template and logic are separated for a good reason. look at the react components nowadays. long tailwind classes + state logic + props nightmare all in one file. terrible to maintain. On a more neutral note, it is difficult to compare these two things. one is a framework and the other is a library (unless you are talking about e.g. nextjs) But I also have to admit that as far as ssr is concerned, nextjs is clearly superior. |
|
This is a nightmare bug to work with. I am using Angular because I was familiar with it, even for SSR, I still use Angular. But the problem with all above now, since it has been siting for a long time, is that some of the key feature just can't be used. Anonymous Sign-In is a important functionality. But this temp fix disable the ability to use it. I hope that the temp fix doesn't have to be rely upon for too long because it will hurt the longer you wait |
|
@delongZhai Hey, have you managed to get this to work with SSR? I posted my solution above that solved the main problem for me, but I quickly ran into a limitation of that solution when I tried to make an AuthGuard based on I'm almost in despair. It looks like I'll have to disable SSR after all, because the devs are too lazy to fix this problem even in 10 months. What a shame. I don't think I'll ever try Supabase on my projects again after this. |
|
hey @on3dd I would recommend you to use Here is my entire code @Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
MobileMenuComponent,
HeaderComponent,
FooterComponent,
],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
title = 'cbd-store';
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
private supabase: SupabaseService
) {}
ngOnInit(): void {
if (isPlatformBrowser(this.platformId) && !this.supabase.client) {
this.supabase.initialize();
}
}
} |
There's still a resolution I can think of, depending on how complex your system is, which is to ditch the supabase browser client, but to use supabase server client entirely, which is a bit more nasty. But hey nextjs is doing that, and I think if you are fine with it, you can as well. |
|
@on3dd and if you switch to server, for getSession, you need to use getUser. here is the warning from their nextjs page. Be careful when protecting pages. The server gets the user session from the cookies, which can be spoofed by anyone.
Always use supabase.auth.getUser() to protect pages and user data.
Never trust supabase.auth.getSession() inside server code. It isn't guaranteed to revalidate the Auth token.
It's safe to trust getUser() because it sends a request to the Supabase Auth server every time to revalidate the Auth token.https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=pages |
@delongZhai Thank you, PLATFORM_ID is something I had already forgotten about.
I don't have as much experience with Angular SSR as I do with Next.js, but doing all this things on the server sounds like a real pain, especially in Angular because you won't have those API handlers of Next.js that can fix things a bit 😖 |
That's correct, for server-side code, I've been especially worried about. And I will continue to make sure my code can be migrated to client side the moment it's resolved. But apparently that's the only workaround for developer who not only need anonymous login and also need to use supabase, and Angular. You may need to write some Express code to define the routes. |
|
For anyone who still blocked by this issue, please prioritize it by submitting a ticket to supabase support in your projects dashboard. The longer we wait, the longer we are blocked by it |
Yep, I understand why a lot of those "bad things" are still there, even though Angular has a strong focus on being backwards compatible that still does not make it megaparsecs superior to React in almost every aspect, come on... I highly disagree on the take "long tailwind classes + state logic + props nightmare all in one file is terrible to maintain". That's why component are there. You can just decompose when it starts to be too big. And it's not mandatory to put everything in one file or use tailwind, you can use css modules and put your css in another file if you prefer to do so (at least with NextJS). I agree that on some points they're not comparable since they don't have the same amount of features. It would be more fair to compare to a full fledge React framework such as NextJS. But the component authoring format can be compared and the React one is less verbose, at least for the creation of a basic component (without JSX and so on involved). I don't say Angular is shit and shouldn't be used, in fact Angular becomes much better release after release, less verbose and more enjoyable to use. But saying that it is megaparsecs superior to React in almost every aspect is such a lie. |
|
Hi everyone, apologies for the lack of replies by the team in this thread - the auth team isn't the most familiar with angular here but we want to understand the root cause of this issue so we can fix it properly without having to do something hacky like downgrading the version or asking angular users to remove the lock.
Specifically, is Angular not able to access the Navigator Lock API? Based off a quick search, it seems like Angular 17 / 18 is compatible with the Navigator Lock API. @hf has also looked into this earlier this year and we suspect that it's an issue with an unhandled promise rejection - supabase/auth-js#830 (comment) we would really appreciate any help from the community with understanding more about the inner workings of angular here! |
But a quick look into this, it forces me to think if there's anything that's wrong with using navigator lock api with zone.js. Zone.js is a basically how Angular magically update the view whenever there the app runs change detection. https://stackoverflow.com/a/52392036 I wonder if using zoneless would make any difference. If it does, perhaps for angular team, we need to move it off the main thread to use web worker? I'm writing to just propose potential problems. I am not certain that it is the case since zone.js has been a while for a long time. But can you also explain how that navigator lock work? Currently, zonejs is running as default, with known issue for SSR, and very few have zoneless implemented. If you have time to look into it, that would be great. Thank you https://angular.dev/guide/experimental/zoneless a topic with zone.js pollution. https://blog.bitsrc.io/angular-mitigating-zone-pollution-in-angular-22734b19576e |
|
The way Zone.js works with promises is that it patches the native Promise API so it tracks the "execution context" in very hacky ways. The Navigator Locks API uses native promises from the looks of it. Meaning -- the browser's internal Promise is being used, not the patched up Zone.js one. This is why the context is being lost and the weird log messages appear. As far as I am aware, there's really no way to fix this. One way to get rid of the issue is to just not use the navigator lock -- which I strongly do not recommend as it would cause other subtle bugs in your application where people are randomly logged out. To do that, set the |
|
Actually maybe one thing that could help is if we were to wrap the lock promise with the patched promise. I know that Dexie's zone.js equivalent likes that. Something like this: supabase/auth-js#989 |
…#989) Wraps the `navigator.locks.request()` function with a plain Promise as libraries such as zone.js patch this object to track execution context. It appears that this browser API uses a native promise that's not patched, causing the tracking context to be lost. It is believed that wrapping this non-zone.js Promise returned by the browser with a promise that's patched by zone.js can help the situation. Related: - supabase/supabase-js#936 - #830
and others
Bug report
Describe the bug
Angular throws an error saying 'Acquiring an exclusive Navigator LockManager lock immediately failed'.
This is a new angular project created with the angular version 17.
The error is not shown in my other project which is created a month ago.
To Reproduce
supabaseClient = createClient(environment.url, environment.key)to a component (app component)Expected behavior
This error should not be thrown and should be able to use all the methods without errors.
Screenshots
System information
Additional context
Could be a duplicate of this issue from gotrue-js.
Though I was able to signin using provider 'google' I wasn't able to retrieve session after I signin (throws an error saying Invalid API key) though my api keys and url are correct. I am assuming the error is with storage.
The text was updated successfully, but these errors were encountered: