Skip to content

enhancement: added call to /sessioninfo api from frontend in Non React framework #124

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.

Sign up for GitHub

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

enhancement: added call to /sessioninfo api from frontend in Non React framework #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83753d0
added `/sessioninfo` call from frontend in vue
Bijit-Mondal Oct 19, 2024
a690dd3
added `/sessioninfo` api call from frontend in angular
Bijit-Mondal Oct 19, 2024
31850f4
added `/sessioninfo` api call from frontend in sveltekit
Bijit-Mondal Oct 19, 2024
e42c3ea
home.component.ts updated syntax
Bijit-Mondal Jan 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 20 additions & 14 deletions boilerplate/frontend/angular-prebuilt/src/app/home/home.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,45 @@
align-items: center;
height: 100vh;
}

.user {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
padding: 0.1rem;
}

span {
margin-right: 0.3rem;
font-size: large;
}

h3 {
color: #ff3e00;
color: #ff7547;
}

h1 {
color: #ff3e00;
color: #ff7547;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
button {
cursor: pointer;
background-color: #ffb399;

.btn {
border: none;
color: rgb(82, 82, 82);
padding: 0.75rem;
margin: 2rem;
transition: all 0.5s ease-in-out;
border-radius: 2rem;
padding: 8px;
border-radius: 6px;
cursor: pointer;
color: #fff;
transition: all 0.2s ease-in;
background-color: #ff7547;
font-size: large;
}
button:hover {
transform: scale(1.1);
background-color: #ff3e00;
color: white;
.btn:hover {
box-shadow: 0 8px 25px -8px #ffb399;
}
.session__btn {
display: flex;
justify-content: space-around;
}
7 changes: 5 additions & 2 deletions boilerplate/frontend/angular-prebuilt/src/app/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ <h1>Hello</h1>
<span>UserId:</span>
<h3>{{ userId }}</h3>

<button (click)="onLogout()">Sign Out</button>
<div class="session__btn">
<button class="btn" (click)="callApi()">Call API</button>
<button class="btn" (click)="onLogout()">Sign Out</button>
</div>
</div>
<p>Visit the <a href="https://supertokens.com">SuperTokens tutorial</a> to learn how to build Auth under a day.</p>
<ng-template #elseBlock>
<button (click)="redirectToLogin()">Sign in</button>
<button class="btn" (click)="redirectToLogin()">Sign in</button>
</ng-template>
</div>
46 changes: 29 additions & 17 deletions boilerplate/frontend/angular-prebuilt/src/app/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,48 @@
import { AfterViewInit, Component } from "@angular/core";
import { afterviewinit, component } from "@angular/core";
import { httpclient } from "@angular/common/http";
Comment on lines +1 to +2
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Angular imports need to be properly capitalized to match the actual class names in the framework. Please update:

import { afterviewinit, component } from "@angular/core";
import { httpclient } from "@angular/common/http";

to:

import { AfterViewInit, Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

Angular's TypeScript imports are case-sensitive, and using incorrect casing will cause compilation errors.

Suggested change
import { afterviewinit, component } from "@angular/core";
import { httpclient } from "@angular/common/http";
import { AfterViewInit, Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.


import * as Session from "supertokens-web-js/recipe/session";
import Session from "supertokens-web-js/recipe/session";

@Component({
@component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.css"],
templateurl: "./home.component.html",
styleurls: ["./home.component.css"],
Comment on lines +8 to +9
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Angular decorator properties should maintain proper camelCase naming convention. Please update templateurl to templateUrl and styleurls to styleUrls to ensure the component works correctly. There appear to be several other instances of incorrect casing in this file as well (like component instead of Component, afterviewinit instead of AfterViewInit), which should also be fixed to prevent runtime errors.

Suggested change
templateurl: "./home.component.html",
styleurls: ["./home.component.css"],
templateUrl: "./home.component.html",
styleUrls: ["./home.component.css"],

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

})
export class HomeComponent implements AfterViewInit {
export class homecomponent implements afterviewinit {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The class name and interface should maintain proper casing to match Angular conventions. Please update homecomponent to HomeComponent and afterviewinit to AfterViewInit to align with the import statement and standard Angular naming practices.

Suggested change
export class homecomponent implements afterviewinit {
export class HomeComponent implements AfterViewInit {

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

title = "angularapp";

public rootId = "rootId";
public userId = "";
public rootid = "rootid";
public userid = "";
Comment on lines +14 to +15
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The property names rootid and userid need to maintain their original camel case format (rootId and userId) to match the template bindings in the HTML file. The current lowercase naming will cause Angular template binding errors since the HTML template references the camel-cased versions.

Suggested change
public rootid = "rootid";
public userid = "";
public rootId = "rootid";
public userId = "";

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

public session = false;

ngAfterViewInit() {
this.getUserInfo();
constructor(private http: httpclient) {}

ngafterviewinit() {
this.getuserinfo();
Comment on lines +20 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The method names should follow Angular's naming conventions: ngAfterViewInit() with proper camelCase capitalization to match the Angular lifecycle hook interface, and getUserInfo() to maintain consistency with the original implementation. Angular is case-sensitive for lifecycle hooks, and incorrect casing will prevent the hook from being properly recognized.

Suggested change
ngafterviewinit() {
this.getuserinfo();
ngafterviewinit() {
this.getuserinfo();

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

}

async getUserInfo() {
this.session = await Session.doesSessionExist();
async getuserinfo() {
this.session = await session.doessessionexist();
if (this.session) {
this.userId = await Session.getUserId();
this.userid = await session.getuserid();
}
}

async onLogout() {
await Session.signOut();
async callapi() {
this.http.get("http://localhost:3001/sessioninfo").subscribe(
(data: any) => {
alert(json.stringify(data, null, 2));
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JavaScript global object name should be capitalized as JSON.stringify() rather than json.stringify(). This is a case-sensitivity issue that would cause a runtime error.

Suggested change
alert(json.stringify(data, null, 2));
alert(JSON.stringify(data, null, 2));

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

},
(error: any) => {
alert(`failed to fetch session info: ${error.message}`);
}
);
}
async onlogout() {
await session.signout();
Comment on lines +40 to +41
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

There's a case mismatch in the method name and Session import usage. The method should be `onLogout()` (capital L) and use `Session.signOut()` to match both the template binding in the HTML (`(click)="onLogout()"`) and the import statement. Currently, Angular won't be able to find the method when the button is clicked.
Suggested change
async onlogout() {
await session.signout();
async onLogout() {
await Session.signOut();

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

window.location.reload();
}

redirectToLogin() {
redirecttologin() {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The method name redirecttologin() doesn't match the HTML template binding in home.component.html which uses camelCase (redirectToLogin). This naming inconsistency will cause the button click handler to fail. Please update either the method name or the template binding to ensure they match using proper camelCase convention.

Suggested change
redirecttologin() {
redirectToLogin() {

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

window.location.href = "auth";
}
}
3 changes: 2 additions & 1 deletion boilerplate/frontend/angular-prebuilt/src/app/home/home.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HttpClientModule } from "@angular/common/http";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";

@NgModule({
declarations: [HomeComponent],
imports: [CommonModule, HomeRoutingModule],
imports: [CommonModule, HomeRoutingModule, HttpClientModule],
})
export class HomeModule {}
59 changes: 40 additions & 19 deletions boilerplate/frontend/vue-prebuilt/src/views/HomeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,24 @@ export default defineComponent({
this.getUserInfo();
},
methods: {
redirectToLogin() {
window.location.href = "/auth";
async callApi() {
try {
const response = await fetch("http://localhost:3001/sessioninfo", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});

if (!response.ok) {
throw new Error(`Error: ${response.status}`);
}

const data = await response.json();
alert(JSON.stringify(data, null, 2));
} catch (error) {
alert(`Failed to fetch session info: ${error}`);
}
},
async getUserInfo() {
this.session = await Session.doesSessionExist();
Expand All @@ -39,15 +55,20 @@ export default defineComponent({
<span>UserId:</span>
<h3>{{ userId }}</h3>

<button @click="onLogout">Sign Out</button>
<div class="session__btn">
<button class="btn" @click="callApi">Call API</button>
<button class="btn" @click="onLogout">Sign Out</button>
</div>
</div>
<div v-else>
<p>
Visit the
<a href="https://supertokens.com">SuperTokens tutorial</a> to learn
how to build Auth under a day.
</p>
<button @click="redirectToLogin">Sign in</button>
<router-link to="/auth">
<button class="btn">Sign in</button>
</router-link>
</div>
</div>
</main>
Expand Down Expand Up @@ -76,31 +97,31 @@ span {
}

h3 {
color: #ff3e00;
color: #ff7547;
}

h1 {
color: #ff3e00;
color: #ff7547;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}

button {
cursor: pointer;
background-color: #ffb399;
.btn {
border: none;
color: rgb(82, 82, 82);
padding: 0.75rem;
margin: 2rem;
transition: all 0.5s ease-in-out;
border-radius: 2rem;
padding: 8px;
border-radius: 6px;
cursor: pointer;
color: #fff;
transition: all 0.2s ease-in;
background-color: #ff7547;
font-size: large;
}

button:hover {
transform: scale(1.1);
background-color: #ff3e00;
color: white;
.btn:hover {
box-shadow: 0 8px 25px -8px #ffb399;
}
.session__btn {
display: flex;
justify-content: space-around;
}
</style>
Loading