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
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?
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
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?
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
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
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.
Appreciate the hard work you put in to these videos Dennis! Lets go Appwrite!!
Thank you, much appreciated 🙏- Dennis Ivy
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
Please also make a video on doing oauth with appwrite in nextjs😊
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! 👌
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!
Awesome work Dennis
Thank you! - Dennis Ivy
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 :)
Amazing 🔥🔥
Dennis, you're amazing! Is it possible to get session() from client component when we store session in cookie? Thank you
Thank you 👋
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
How we can make validation ?
I don't get it.
We should to prepare endpoints in our api or sth?
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?
i there an video to do the same auth operations like login logout too in client side appwrite at Account level ?
How would you handle login errors ?
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
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
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 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
❤ 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?
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
❤
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
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 ❤
I want one feature include that is join other tables like sql
You'll get something soon that will make you happy ;) - 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