Digital CEO
Digital CEO
  • 60
  • 384 017
Google Auth with Nextjs 14 app directory
CONNECT ON MY DISCORD COMMUNITY:
discord.gg/5zsdrxH8m8
Note: When you receive the profile info from Google via the id_token, decode it and save the user's info in your own cookie or database. If you save and rely on the direct id_token jwt value for future profile info like I did in the tutorial, remember it will expire, requiring additional checks to re-fetch it. An easier way is to store the user's name and profile photo links in your database unless you want to refresh profile info from Google more frequently.
0:00 intro
0:38 Demo
2:36 Create Google Project
4:00 Google Auth Api route
9:18 Google Sign in Button
10:14 Google Tokens
12:34 Create Login Cookie
14:00 Google Profile Token
15:28 Check if user is Logged in
17:00 Header Profile Photo
20:28 Logout Button/Route
23:00 Re-use saved user token on logins
27:00 Some points
SOCIALS:
Twitter: omarel
Website: www.omarel.com
LinkedIn: www.linkedin.com/in/omarelbaga
GitHub: github.com/oelbaga
Переглядів: 383

Відео

How to add Google Analytics to your Next.js 14 site with app router
Переглядів 2 тис.5 місяців тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
How to stop dev emails from going to spam
Переглядів 1075 місяців тому
Email platforms like gmail and yahoo now require email authentication on domain names to be allowed through their system. This involves adding email authenticating records to the DNS of the domain you are sending emails from. CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: GitHub: github.com/oelbaga Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/i...
Zuckerberg Reveals Challenges of AI Data Centers (Meta, AI, Energy Insights)
Переглядів 2825 місяців тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
Will AI Steal Our Jobs? Reacting to Predictions on AI in Software Engineering
Переглядів 875 місяців тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
Self host Next.js website on an Ubuntu server with Auto Deploy on commits!
Переглядів 3,8 тис.5 місяців тому
To host Next.js app/website you only need a server running Node.js. In this video you will learn how to host a next.js website or app on an ubuntu (linux) server in the cloud which you can get from Digital ocean or AWS. As a note, In this example we are not using Vercel, Netlify or any of the app hosting platforms on digital ocean or aws as those are also abstractions. We are setting up a clean...
Men Crash an All Women Tech conference...
Переглядів 1,2 тис.Рік тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
What happened to Elon Musk Neuralink monkeys: Grisly Details...
Переглядів 2,7 тис.Рік тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
You feel safe in cars, but little do you know how they spy
Переглядів 68Рік тому
In a new study by Mozilla, 24 companies were found collecting private data on drivers of their cars. CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
iPhone’s radiation levels spark backlash
Переглядів 152Рік тому
0:00 iPhone banned 2:00 Google Steals User Locations 4:00 TikTok Teen privacy Tech News - September 2023 CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
They exploit developers...devs must unite
Переглядів 82Рік тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga
Learn CRUD with React/Next.JS and MySQL (Complete tutorial)
Переглядів 39 тис.Рік тому
In this video you'll learn how to do all CRUD operations with Next.JS api and MySQL database, or any database you choose to use. We'll create an API in Next.JS and then learn how to read, create, update and delete data through that API. The concept generally works with any database but in this demo you'll use a MySQL database. CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 0:00 intro 1:...
Most annoying problem with GIT and NextJS
Переглядів 273Рік тому
CONNECT ON MY DISCORD COMMUNITY: discord.gg/5zsdrxH8m8 SOCIALS: Twitter: omarel Website: www.omarel.com LinkedIn: www.linkedin.com/in/omarelbaga GitHub: github.com/oelbaga #github #git #sourcecontrol #react #nextjs #vercel
Dynamic Refs and State in React
Переглядів 2,9 тис.Рік тому
Dynamic Refs and State in React
How React/NextJS logins actually work. Sessions VS oAuth
Переглядів 733Рік тому
How React/NextJS logins actually work. Sessions VS oAuth
Coding all NextJS 13 Features (2022)
Переглядів 1,8 тис.Рік тому
Coding all NextJS 13 Features (2022)
How to use Context API in React/NextJS
Переглядів 20 тис.2 роки тому
How to use Context API in React/NextJS
Change parent state from child components in React/NextJS
Переглядів 6 тис.2 роки тому
Change parent state from child components in React/NextJS
React form validation with react hook form. Simple!
Переглядів 9972 роки тому
React form validation with react hook form. Simple!
Make full viewport sections snap scroll in React (scroll to sections on click, animation, more)
Переглядів 15 тис.2 роки тому
Make full viewport sections snap scroll in React (scroll to sections on click, animation, more)
Should you learn code from Tutorials? [REACTION]
Переглядів 1812 роки тому
Should you learn code from Tutorials? [REACTION]
3 costly mistakes developers make with NextJS
Переглядів 4,4 тис.2 роки тому
3 costly mistakes developers make with NextJS
Reacting to a day in the life of a Google Engineer
Переглядів 1922 роки тому
Reacting to a day in the life of a Google Engineer
Convert an HTML Website to React/NextJS
Переглядів 14 тис.2 роки тому
Convert an HTML Website to React/NextJS
[Step by Step] Deploy NextJS on Ubuntu Digital Ocean (2 NextJS Apps on one server)
Переглядів 39 тис.2 роки тому
[Step by Step] Deploy NextJS on Ubuntu Digital Ocean (2 NextJS Apps on one server)
Solving the React 18 Double Render problem on useEffect
Переглядів 9 тис.2 роки тому
Solving the React 18 Double Render problem on useEffect
Send URL Parameters in React to a form
Переглядів 3,1 тис.2 роки тому
Send URL Parameters in React to a form
NextJS MySQL example. Get MySQL data into a react app using Node JS
Переглядів 45 тис.2 роки тому
NextJS MySQL example. Get MySQL data into a react app using Node JS
Vanilla React Image Slider from scratch - just 30 minutes - even easier than javascript sliders
Переглядів 9462 роки тому
Vanilla React Image Slider from scratch - just 30 minutes - even easier than javascript sliders
Every way to add CSS in a React app
Переглядів 2042 роки тому
Every way to add CSS in a React app

КОМЕНТАРІ

  • @marcellaecommerce
    @marcellaecommerce 4 дні тому

    Thank you Brother.

  • @LauraHaas
    @LauraHaas 12 днів тому

    Thank you very much for these explanations! React is a great tool

  • @maxschneidercodes3
    @maxschneidercodes3 12 днів тому

    Thank you so much!

  • @patolorde
    @patolorde 15 днів тому

    Thanks brother!

  • @darz_k.
    @darz_k. 15 днів тому

    Not a brilliant idea having your heavy keyboard keys mic'd up.

  • @zainmp3499
    @zainmp3499 16 днів тому

    very helpfull video thankyou

  • @amremam4188
    @amremam4188 22 дні тому

    Then what is the point of npm run build

  • @nshettys
    @nshettys Місяць тому

    Great Stuff! Thanks. And yes, you got a new subscriber to your channel today

  • @simonboddy7415
    @simonboddy7415 Місяць тому

    Really good! I'm still getting over the fact that nextjs has to be built in situ. A build can always fail, so it seems very risky to overwrite your live site with some new code that needs to be built. Folk are likely handling this with containers but I think I'm going to try a blue/green strategy and switch the nginx config when the build has succeeded. I'm also a bit startled to see the PATH modified in the deployment pipeline. Why should I need to modify my pipeline every time my node version changes? I think I need a better solution there. God I wish we still had server guys.

  • @jake_bareng
    @jake_bareng Місяць тому

    this was an actual good video and it was not 1 hour long like other videos

  • @iSkayer
    @iSkayer Місяць тому

    This was a really great tutorial, thank you for walking us through the steps. I already knew most of them, but needed a refresh, especially on the pm2 part. Keep up the great work!

  • @thecrazymedic4480
    @thecrazymedic4480 2 місяці тому

    This guy is a genius. Thanks a lot. I was having a lot of issues with SSH keys but it's clear now

  • @CmdZOD
    @CmdZOD 2 місяці тому

    Thank you so much, i was banging my head on the wall with this SSH stuff !

  • @mathlouly
    @mathlouly 2 місяці тому

    pretty good, ty.

  • @pongtswaila7922
    @pongtswaila7922 2 місяці тому

    Very helpful content. Tnx so much! 🙏

  • @scottnoring2960
    @scottnoring2960 2 місяці тому

    How old is this. Is it NextJS14? I'm getting errors with usestate and useffect.

  • @palakbasak3551
    @palakbasak3551 2 місяці тому

    How to deploy this?

  • @Tanner-cz4bd
    @Tanner-cz4bd 2 місяці тому

    thanks bro

  • @davidtakidze25
    @davidtakidze25 2 місяці тому

    Thank you for the incredible video! I have a question: I’m currently using a droplet to host WordPress and would like to host a Next.js application on the same droplet. I followed your steps, but are there any additional considerations I should consider when hosting Next.js and WordPress on the same server?

  • @AndreWang-kf3zu
    @AndreWang-kf3zu 2 місяці тому

    It works! I applied google analytics on my nextjs personal website. Super helpful.

  • @josemarceloalexandre3656
    @josemarceloalexandre3656 2 місяці тому

    Wow, best video I've ever watched on UA-cam! Congratulations!!!

  • @arfazchhapawala2892
    @arfazchhapawala2892 2 місяці тому

    Thanks for sharing an amazing tutorial 🙏. I was really searching for the perfect one, and it is well explained 🙌

  • @Marlorouse109
    @Marlorouse109 2 місяці тому

    Thanks for sharing !!! This was very helpful!

  • @imomuganda
    @imomuganda 3 місяці тому

    Double like! This was clear, concise, and it worked.

  • @beticohernandez9536
    @beticohernandez9536 3 місяці тому

    interesante. Un carrito de compra seria interesante tambien.

  • @FelipeOcampo-v4i
    @FelipeOcampo-v4i 3 місяці тому

    Super helpful! Thanks so much

  • @proconfusedtechie3867
    @proconfusedtechie3867 3 місяці тому

    It's okay if we want to pass one or two state variables. But still react is bad when the application grows large and need to pass multiple state variables and their setters. It needs support from redux when the application grows large

  • @devinsmith4713
    @devinsmith4713 3 місяці тому

    8 hours of my life (of which I still didn't succeed in) summed up in 25 minutes. Now I can get on with the meat of my project. Thank you.

  • @vaskoooo
    @vaskoooo 3 місяці тому

    Man I just discovered your channel and I’m already addicted. You have a realtà nice way to deliver concepts

  • @christianpossidonio
    @christianpossidonio 3 місяці тому

    Do you winner my like and I subscribe. Thanks my fried. Ops, I`m from Rio de Janeiro - Brazil here

  • @marchello6826
    @marchello6826 3 місяці тому

    Thank you for the incredibly helpful content!

  • @ijusthatenormiesihavenooth1164
    @ijusthatenormiesihavenooth1164 3 місяці тому

    It was genius. Would hire immediately

  • @Andy-l9p
    @Andy-l9p 3 місяці тому

    Thats remarkable. Danke

  • @alleggs
    @alleggs 4 місяці тому

    something wrong with this. i tries to run two apps on same domain with subomains, but only one app runs on domain

  • @BantuNiLo
    @BantuNiLo 4 місяці тому

    Wr kill billions of chickens

  • @achrefmtir8250
    @achrefmtir8250 4 місяці тому

    this content is legendary !

  • @bimwerx
    @bimwerx 4 місяці тому

    The title reads 'Self host' - using Digital Ocean is not self hosting. How about using Ubuntu-server on a local machine to deploy a live Next.js app?

    • @haiffy
      @haiffy 4 місяці тому

      Digital ocean droplets are just ubuntu server under the hood, literally same thing, you can use this tutorial on any ubuntu server anywhere

    • @PongLenis99
      @PongLenis99 2 місяці тому

      @@haiffy yah it worked for me on my self hosted ubuntu. great tut

  • @AshishSethi-cs1bu
    @AshishSethi-cs1bu 4 місяці тому

    Great Tutorial though! Thanks a lot 🙂 Faced an issue while following your steps, solved it by doing this: Generate ssh key on the last step (github actions) using ed25519 instead of rsa, in my case generating using rsa gave me an error (Permission denied)

  • @anonimosbrain
    @anonimosbrain 4 місяці тому

    who else was paying attention to the mechanical key caps sound instead of the tutorial

  • @shariquenadim3144
    @shariquenadim3144 4 місяці тому

    Will the WordPress headless cms slow?

  • @wakka2100
    @wakka2100 4 місяці тому

    i cannot find the js file on app/api/hello, i also dont use resource. also whatever i do its always 404

  • @drstrangelove09
    @drstrangelove09 4 місяці тому

    "folder" -> directory

  • @NaveedPasha-rx8wv
    @NaveedPasha-rx8wv 4 місяці тому

    Thank you so much for this amazing tutorial! I followed your steps and successfully implemented Google Auth in my Next.js project. Your clear explanations and detailed instructions made it easy to understand. Keep up the great work!

  • @kubilaybzk
    @kubilaybzk 4 місяці тому

    I have a question for you, actually more of a suggestion. I couldn't really find any content on this topic on the internet or UA-cam. If the session comes from the backend and this session needs to be used for logging in (for authentication processes or other operations), how can we set this up using NextAuth? Additionally, how can we take the session's expiration date from the information coming from the backend and process it?

    • @thedigitalceo
      @thedigitalceo 4 місяці тому

      I don’t fully understand the question. Can you explain again. I don’t use the nextauth package because I do auth myself. I authenticate the user based on cross checking credentials entered against their credentials stored in the database and the create a cookie. Then on each route I check if the cookie is still valid. If not I redirect them to the login page.

    • @kubilaybzk
      @kubilaybzk 4 місяці тому

      @@thedigitalceo This is the question I actually wanted to ask. Let's assume we send login credentials to an API with the endpoint 'localhost:5031/api/login'. This API returns a token and an expiration date to us. We need to log in using this information, meaning the token sent by the API should be set as the token in the credential section when logging in with NextAuth. At the same time, the expiration date of the token should be set using the expirationdata value received from the API. We need to check the token's expiration here, and if the token has expired, the user's session should be terminated. I actually wanted to ask for a video recommendation on this topic, specifically on how to log in a user using NextAuth with any token coming from the backend.

    • @kubilaybzk
      @kubilaybzk 4 місяці тому

      @@thedigitalceo This is the question I actually wanted to ask. Let's assume we send login credentials to an API with the endpoint 'localhost:5031/api/login'. This API returns a token and an expiration date to us. We need to log in using this information, meaning the token sent by the API should be set as the token in the credential section when logging in with NextAuth. At the same time, the expiration date of the token should be set using the expirationdata value received from the API We need to check the token's expiration here, and if the token has expired, the user's session should be terminated. I actually wanted to ask for a video recommendation on this topic, specifically on how to log in a user using NextAuth with any token coming from the backend.

  • @devve7
    @devve7 4 місяці тому

    Great Job !!! Thnks. - My headache is now off.😁

  • @Mark-nm9sm
    @Mark-nm9sm 4 місяці тому

    Yeah but how do we do pagination on the data instead of fetchjing every single on of them ?!?!?!?!?

  • @born2die827
    @born2die827 5 місяців тому

    why don't you tell us where we have to move the .next folder? Who tf creates a project on the production Server???

  • @rumorscameras
    @rumorscameras 5 місяців тому

    Meuurika is shuuiiiittt. Elom monsk is a shuuiiit...he got the ttatment from israfail and came back saying freedom of speech is anti semitism...all crap

  • @ArturComunello
    @ArturComunello 5 місяців тому

    I'm trying to reproduce this in 2024, but i cant install or build the next app in the droplet due to a low memory, how can I fix this?

    • @ArturComunello
      @ArturComunello 5 місяців тому

      It was just thi. export NODE_OPTIONS=--max_old_space_size=1024

  • @ywywywyw612
    @ywywywyw612 5 місяців тому

    There is a slight problem with this and it is that you cannot run build while running PM2 because building causes the files that are being served by PM2 to be modified, you have to copy them to another directory before hand, I think you can use `next build [directory to which you copied the files]` to fix this, otherwise awesome video! edit: use next JS standalone mode, not `next build [directory]`!

    • @thedigitalceo
      @thedigitalceo 4 місяці тому

      A good point. I haven’t run into a lot of issues in most cases but what you suggested is definitely best practice. Thank you!