I have created a GitHub project. In exchange for all your help, my intent is to provide an article with a working demo for Angular/Firebase using SuperTokens so others can refer to it. However, the demo is not yet working. There are some issues with Sessions that I am unable to figure out. Here is the link: https://github.com/dleangen/supertokens-demo-1/tree/supertokens-ThirdPartyEmailPassword

what seems to be the session related issue?

Well, before that, I have a question about Session.init(). I am having issues with that. In the docs, there are two mentions of including a Session.init(): (1) https://supertokens.com/docs/thirdpartyemailpassword/quick-setup/core/saas-setup and (2) https://supertokens.com/docs/thirdpartyemailpassword/quick-setup/frontend. (1) uses the import from supertokens-node, but (2) uses the import from supertokens-auth-react. The SuperTokens interface is not the same. So I suppose that they are both needed? I find it a bit confusing to have two different interfaces with the same name, imported from different places. By the way, based on the behaviour of the code, it seems that both are required. Can you confirm? You can see where I used them here in the demo: 1. https://github.com/dleangen/supertokens-demo-1/blob/f7449c008bc9d51eeb19e53d81626908a876555e/src/main.ts#L24-L30 2. https://github.com/dleangen/supertokens-demo-1/blob/supertokens-ThirdPartyEmailPassword/src/app/components/signin/supertokens-auth.component.tsx#L7-L62

Yes. Both are required. One is for frontend initialisation. And one is for backend init

Just to confirm again: both are required on the frontend, but one is for actually initialising the frontend, while the other is for initialising the backed. Correct?

> both are required on the frontend, but one is for actually initialising the frontend, while the other is for initialising the backed. Correct? Thats not true. The frontend one (supertokens-auth-react) should happen on the client side, but supertokens-node, should happen on the backend side. > Like maybe SuperTokens.FrontEnd.init() and SuperTokens.BackEnd.init() or even SuperTokensFrontEnd, or just FrontEnd/BackEnd or whatever? Just a thought... Well.. they are from two different SDKs entirely. So in a way, they are already very different.

Sorry, my question was very poorly formulated. I gave you the wrong links. In any case, I think I have resolved my confusion. If you like, I can tell you where I got confused in case you want to add a few words to the docs, but otherwise I am ok now. So back to my session problem...

> If you like, I can tell you where I got confused in case you want to add a few words to the docs Sure! Please do

Ok, maybe better to make a PR. I'll do that later.

sounds good.

np

right. So if a session deosn't exist, then doesSessionExist will return a false.

Ok, then clearly I have misunderstood something... Let me explain my understanding, so perhaps you can correct me.

Can i see the set-cookie response headers when you call the login API?

I have integrated the frontend UI:

The frontend should call this on it’s own. What’s the value of websiteBasePath in your appInfo config?

Ah! Thank you!

What’s the frontend config you have given to supertokens.init?

If you are referring to "supertokens-web-js", then yes: it is called in the app init, so for all routes: https://github.com/dleangen/supertokens-demo-1/blob/supertokens-ThirdPartyEmailPassword/src/main.ts#L35 I just tried to follow the instructions that were here: https://supertokens.com/docs/thirdpartyemailpassword/quick-setup/frontend It is from the middle of the page that shows this:

Initialize the supertokens-web-js SDK in your angular app's root component. This will provide session management across your entire application.

The only change I made was for Angular 14 standalone components, which does not have a root component. I confirmed that the code is being called, but I don't seem to see the orange loading spinner...

ohhh.. you are using supertokens-web-js. Right. that will not make the API call itself. it's a non UI SDK

Actually, I am trying to use the prebuilt UI. I am using the UI init code ONLY within the component itself, which is how I understood the instructions here: https://supertokens.com/docs/thirdpartyemailpassword/quick-setup/frontend From the section that describes:

In your auth component folder create a react component supertokensAuthComponent.tsx where we initialize the supertokens-auth-react SDK. This will tell SuperTokens which UI to show when the user visits the login page.

Here is the code: https://github.com/dleangen/supertokens-demo-1/blob/supertokens-ThirdPartyEmailPassword/src/app/components/signin/supertokens-auth.component.tsx#L7-L62 After that, I am trying to secure a route in the app, which is described here: https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/sessions/securing-component That page leads me here: https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/sessions/checking-session-front-end That asks me to do this:

import Session from 'supertokens-web-js/recipe/session';

async function doesSessionExist() {
      if (await Session.doesSessionExist()) {
            // user is logged in
      } else {
            // user has not logged in yet
      }
}

But that requires the Supertokens.init from "supertokens-web-js". However, you are saying that I shouldn't be using that if I am using the prebuilt code. I hope you see my circular problem...

Well, did you follow the angular code snippets and instructions? You need to initialise both of the SDKs for it to work.

> Well, did you follow the angular code snippets and instructions? Yes, at least that was the intention. > You need to initialise both of the SDKs for it to work. Yes, I did. > We have an angular demo app as well with the pre built ui. Did you see that? I did not know. That would be very helpful. I will look again to try to find this. Thank you for mentioning it now. > If you setup the routing right, then you should see the the /auth/callback/google route be handled by the pre built ui component. > /signin/callback/google * That is my expectation. The existing app will be the most helpful way forward. Thanks.

this is the demo app: https://github.com/supertokens/supertokens-auth-react/tree/master/examples/with-angular-thirdpartyemailpassword

Thank you!! I will check this out when I get back to my desk. Sorry that I didn't notice this before.

no worries! I'll iisue a PR to your repo if i find some issue

> no worries! I'll iisue a PR to your repo if i find some issue That would be awesome. It uses Angular 14 and the new standalone components. However, I don't think that should be an issue. > do i need any env vars to make it work? It uses Firebase, so it requires a Firebase project. Unless you are familiar with setting up Firebase, maybe it would be better for me to check out your demo first.

right ok. Please checkout the demo then. Im not too familiar with firebase setup

Ok, no worries!

but the demo just follows the instrs from the docs.. so not sure if there is anything new that you will find

I will. I believe that either I am misunderstanding the instructions, or I have made a mistake somewhere. I don't believe that the new version of Angular or the use of Firebase should have any impact.

I think so too

Just so you know, I am back at my desk today. I cloned the demo project and updated to Angular 14, then switched to using standalone components. Based on the working demo, I was easily able to find the (very stupid) problem. As predicted, it was an error on my part. My demo project is now working. I will try to propose some PRs to the docs so that hopefully others don't make the same (very stupid) mistakes that I made. I am calling these very stupid mistakes, but in fairness, there are many new things happening, so it is very easy when trying this out for the first time for these types of "stupid" problems to interfere. I wish I had realized sooner that a demo project was already available. That would have saved me a lot of time. I will now proceed with trying to integrate with Firebase, and I may try out different approaches (like using Firebase Auth for signin, but SuperTokens for session management).

> I wish I had realized sooner that a demo project was already available. That would have saved me a lot of time. Makes sense. I guess we can add a link to the demo app at the start of the quick setup section maybe. What were the mistakes?

The main mistake was in the routing configuration. I did not understand how it was supposed to work.

Hmm. What was the mistake in there? I didn't find anything obvious when I saw the code

Following authentication (at least with Google, but I assume also with other providers), the provider sends a callback to /auth/something/something. I only configured the "auth" route, but I have to actually configure the AuthComponent to intercept all children of "auth". I had assumed (wrongly) that just having a config like this would work:

{ path: 'auth', component: AuthComponent }

But actually, it requires something more like this:

{ path: 'auth', children: [ { path: '**', component: AuthComponent } ] }

I did not notice because I was using standalone components. I did not think it was relevant at the time. Turns out it is necessary. I only noticed when I updated the existing demo to use standalone components in Angular 14.

Ahh i see. Fair enough!

But when several "little" things like this are all thrown together, it can take a while to figure out what is going wrong. The demo is extremely helpful.

hmm. in the demo app, we have without the

**

(https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-angular-thirdpartyemailpassword/src/app/app-routing.module.ts#L6), and our demo app still works.

Right, I am using Angular. Maybe it just works differently in Angular...

yes please

Ok, I see what you mean. Let me double check...

I think so too.. maybe dynamic components do

**

implicitly. Also, I would recommend using dynamic components since it won't include the supertokens-auth-react + react in the bundle for non auth routes -> reducing their bundle size by quite a bit

Yes, makes sense. Usually I start my prototyping by just throwing everything in and optimizing later.

fair enough

In any case, now I can finally take some steps forward. Thanks for all your patient help. 👍🏻