This was AMAZING Dennis 🎉 I really needed this! You really should do a full course building a SaaS or similar with Appwrite and NextJS. Would gladly pay for that kind of material.
Realtime with SSR is something I definitely want to cover next. Gonna put that on my to-do list. And I used the API route just to show how to protect it. I understand this can be done from the server action. Tutorials often include extra steps just for explanation purposes. And I realized I made a mistake with the environment variables after I posted 🤦♂️ However, these were only used to initiate a the client and in the API route so all is good. I will make a note and pin it as a comment tho so people are aware of the difference. - Dennis Ivy
Because our server is stateless. In a SPA, we can initialize this once on the first request. With SSR, this has to be done on each request. This is standard with any session management system. - Dennis Ivy
I'm experiencing weird behaviour with my middleware when i login using oAuth2. A session is created and the user is redirected to the /account route (the session is logged out in console). In my middleware file, the session does't exist and i'm given a "No Session" error (even when there is a session). Consequently the user is immediately redirected back to /login. This is only happening with oAuth2, my email authentication works fine. Any ideas why this could be happening?
Thanks for the video! I have a question. Is there a good way to use the session cookie on the client side too? I set the cookie after login using the "cookies-next" library so that it is also available on the client. This only works if I remove the "httpOnly" flag in the setCookie function. I guess there is a security issue with removing this, am I right? Do you have any other solutions?
Appwrite JWT are short lived (15 min), in cases like this you would be better off going with session auth. Or maybe you are refering to JWT's in general, not with NextJS?
54:47 nie do końca rozumiem jak to ma działać towrzysz nową sesję aby ją zaraz usunąć. Czy to jest jedynie pobieranie aktualnej sesji. Bo jeśli tworzy się nowa sesja to to nie ma sensu. Czy ktoś może mi to wytłumaczyć? Bo na chwilę obecną wydaje mi się że: Scenariusz 1: przy logowaniu tworzymy sesję nazwijmy ją sesja1 oraz przy wylogowywaniu tworzymy sesję nazwijmy ją sesja2 i za chwilę usówamy sesja2 z naszej listy sesji. Scenariusz 2: (chyba ten prawdziwy przynajmniej tak wynika z filmu): przy logowaniu tworzymy sesję nazwijmy ją sesja1 oraz przy wylogowywaniu chcemy stworzyć sesję ale że jest już ona to po prostu zwraca nam sesja1 i za chwilę usówamy tą sesję po prostu.
You are only creating a session when you login. const session = account.createEmailPasswordSession(....) On subsequent requests, you are retrieving the session to create a client instance, NOT a session. The client is how we interact with our Appwrite backend. So we must first ensure we have a client before we can send a request to our backend, like deleting a session. In a single page application we would only need to create this client instance once and reuse it. However, with SSR, we are loading a new page each time so we need to ensure we always have a new client instance. So when we logout, we: 1. GET the session cookie 2. Create a client instance 3. Use the client to delete the session Feel free to join our office ours session tomarrow at 9am PST and ask more questions there so I can elaborate. Join our discord server to do so. - Dennis Ivy
So that was a mistake on my part, however, I only used the environment variables on the server side for my API route and to initial my client, so it's safe either way. However, I will make a note and pin it in this comment section to make sure people are aware of this. Thanks for the heads up :) - Dennis Ivy
The idea would be different with SSR so it depends what you are trying to accomplish. If you need to manage the state in a way that handles user interaction on the client side, then you can always just switch to a client-rendered component and do things the traditional react way.
So that was a mistake on my part, however, I only used the environment variables on the server side for my API route and to initial my client, so it's safe either way. However, I will make a note and pin it in this comment section to make sure people are aware of this. Thanks for the heads up :) - Dennis Ivy
love from pakistan sir 😘😘🥰🥰 sir now make a full chat web using nextjs appwrite using real time , with notifications , redux or zustand and other best practices , thanks 🥰🥰🥰🥰
We're working on creating some wrappers to simplify this process. The purpose of this video is to get down to the core fundamentals, we'll improve upon this from here :) - Dennis Ivy
You are a maniac for not choosing typescript.
Please also make a video on doing oauth with appwrite in nextjs😊
This was AMAZING Dennis 🎉
I really needed this!
You really should do a full course building a SaaS or similar with Appwrite and NextJS. Would gladly pay for that kind of material.
Thank you, I will be working on something like that, hopefully soon 😁 - Dennis Ivy
@@Appwrite yh ithink it would help
Thanks, Definitely needed this!!!
Been using Appwrite for every projects!
Need an OAuth in NextJS
Thanks for this Dennis!
Realtime with SSR is something I definitely want to cover next. Gonna put that on my to-do list.
And I used the API route just to show how to protect it. I understand this can be done from the server action. Tutorials often include extra steps just for explanation purposes.
And I realized I made a mistake with the environment variables after I posted 🤦♂️ However, these were only used to initiate a the client and in the API route so all is good. I will make a note and pin it as a comment tho so people are aware of the difference. - Dennis Ivy
@@Appwrite awesome! Yea all good man, just thought I’d flag anyway. Great stuff Dennis! 👌
Awesome work Dennis
Thank you! - Dennis Ivy
Def went with the right thumbnail :) Top was the way to go
I'm doing A/B testing so youtube actually showing both RN.
Results so far:
- Top: 56.6%
- Button: 43.4
@@Appwrite ah cool, didn’t know you could do that on YT! Very cool!
@JonLeeSmith x.com/dennisivy11/status/1818719309113573625?s=46&t=b5FQJ_93_i_9JxrTsD0G4w
@@Appwrite ah missed that on twitter! Cool!
great work, wondering how setting and getting cookies would work with OAuth since OAuth is setting 3-4 cookies when user is logged in?
There is a process to follow. I will have to make a tutorial on this.
@@Appwrite Looking forward to that and thanks for this video :)
Why do we need to create a new client instance of Appwrite client every time we call createSessionClient or createAdminClient ??
Because our server is stateless. In a SPA, we can initialize this once on the first request. With SSR, this has to be done on each request. This is standard with any session management system. - Dennis Ivy
Perfect, really excellent thank you
i there an video to do the same auth operations like login logout too in client side appwrite at Account level ?
Dennis, you're amazing! Is it possible to get session() from client component when we store session in cookie? Thank you
I'm experiencing weird behaviour with my middleware when i login using oAuth2. A session is created and the user is redirected to the /account route (the session is logged out in console). In my middleware file, the session does't exist and i'm given a "No Session" error (even when there is a session). Consequently the user is immediately redirected back to /login. This is only happening with oAuth2, my email authentication works fine. Any ideas why this could be happening?
I tried to implement this on my project with typescript but it seems not to work, it is throwing much errors related to server actions
Amazing 🔥🔥
How we can make validation ?
I don't get it.
We should to prepare endpoints in our api or sth?
Thanks for the video!
I have a question. Is there a good way to use the session cookie on the client side too? I set the cookie after login using the "cookies-next" library so that it is also available on the client.
This only works if I remove the "httpOnly" flag in the setCookie function.
I guess there is a security issue with removing this, am I right? Do you have any other solutions?
what is your icon theme?
Would love to see a similar video with JWT token authentication with refresh token. Have always struggled with this topic
Appwrite JWT are short lived (15 min), in cases like this you would be better off going with session auth. Or maybe you are refering to JWT's in general, not with NextJS?
How would you handle login errors ?
54:47 nie do końca rozumiem jak to ma działać towrzysz nową sesję aby ją zaraz usunąć. Czy to jest jedynie pobieranie aktualnej sesji.
Bo jeśli tworzy się nowa sesja to to nie ma sensu.
Czy ktoś może mi to wytłumaczyć?
Bo na chwilę obecną wydaje mi się że:
Scenariusz 1:
przy logowaniu tworzymy sesję nazwijmy ją sesja1
oraz przy wylogowywaniu tworzymy sesję nazwijmy ją sesja2
i za chwilę usówamy sesja2 z naszej listy sesji.
Scenariusz 2: (chyba ten prawdziwy przynajmniej tak wynika z filmu):
przy logowaniu tworzymy sesję nazwijmy ją sesja1
oraz przy wylogowywaniu chcemy stworzyć sesję ale że jest już ona to po prostu zwraca nam sesja1
i za chwilę usówamy tą sesję po prostu.
You are only creating a session when you login.
const session = account.createEmailPasswordSession(....)
On subsequent requests, you are retrieving the session to create a client instance, NOT a session.
The client is how we interact with our Appwrite backend. So we must first ensure we have a client before we can send a request to our backend, like deleting a session. In a single page application we would only need to create this client instance once and reuse it. However, with SSR, we are loading a new page each time so we need to ensure we always have a new client instance.
So when we logout, we:
1. GET the session cookie
2. Create a client instance
3. Use the client to delete the session
Feel free to join our office ours session tomarrow at 9am PST and ask more questions there so I can elaborate. Join our discord server to do so. - Dennis Ivy
Thanks for your great explanation.
I love appwrite. And the appwrite society. Also your videos ❤
But when the session expires, the user gets logged out, right? Is there something like token refresh for active users?
You can always update the session - Dennis Ivy
appwrite.io/docs/references/cloud/client-web/account#updateSession
Can you make a video of how subscription based contents work? Or if there already is, can somebody get me the link?
Nice video!
Doesn't NEXT_PUBLIC_API_KEY make the api key publicly accessible?
So that was a mistake on my part, however, I only used the environment variables on the server side for my API route and to initial my client, so it's safe either way. However, I will make a note and pin it in this comment section to make sure people are aware of this. Thanks for the heads up :) - Dennis Ivy
❤ we love your work!. Is it possible to manage the state in ssr??
The idea would be different with SSR so it depends what you are trying to accomplish. If you need to manage the state in a way that handles user interaction on the client side, then you can always just switch to a client-rendered component and do things the traditional react way.
What’s about username/password auth?
How to show a loading indicator when you are waiting the server response on login?
Just add a `loading.js` component in your app folder and create the component you want to see. As simple as that 😁
lack of isomorphic sdk is always a negative in javascript frameworks
Why you use NEXT_PUBLIC in server side ?
So that was a mistake on my part, however, I only used the environment variables on the server side for my API route and to initial my client, so it's safe either way. However, I will make a note and pin it in this comment section to make sure people are aware of this. Thanks for the heads up :) - Dennis Ivy
❤
Thank you 👋
I want one feature include that is join other tables like sql
You'll get something soon that will make you happy ;) - Dennis Ivy
Need 2FA and oauth logins as well, and protect pages without making every page dynamic :(
We have videos on these topics but not with Next js. I can work on some more examples in the future - Dennis Ivy
love from pakistan sir 😘😘🥰🥰 sir now make a full chat web using nextjs appwrite using real time , with notifications , redux or zustand and other best practices , thanks 🥰🥰🥰🥰
Thank you! Appreciate the suggestion :)
middleware denial, hahaha they have to register now, no escape.
feels hacky
We're working on creating some wrappers to simplify this process. The purpose of this video is to get down to the core fundamentals, we'll improve upon this from here :) - Dennis Ivy