Coding Reflections
Coding Reflections
  • Видео 69
  • Просмотров 391 209
How to Implement Sign-in With Google using PHP [OAuth 2.0]
This video shows you how to implement an OAuth 2.0 login flow with Google as the provider in vanilla PHP.
Donations: you can support this channel by buying me a coffee:
ko-fi.com/abhinavr
Website: www.coralnodes.com
---------------------------------------
Server providers:
Linode: www.coralnodes.com/go/linode/
DigitalOcean: www.coralnodes.com/go/digitalocean/
-------------------------------------------------------------
0:00 intro
1:42 getting client id and secret
5:14 demo
7:46 requesting authorization code
12:34 code exchange
16:11 storing cookies
18:13 fetching user profile
20:49 storing user data in session
22:10 refreshing access token
23:48 sign out
Disclaimer:
This video is based on my personal experi...
Просмотров: 30

Видео

Credentials Authentication from Scratch in Next.js 15 - with Email & Password
Просмотров 297 часов назад
This video shows you how to implement credentials (email and password) based authentication from scratch in Next.js 15. No need for any auth libraries. 0:00 intro 1:02 creating the pages 2:03 signup page 3:56 handling signup form submission 11:09 setup mongodb database 12:32 mongoose schemas & db connection 14:50 defining user-related functions 17:52 password hashing 23:02 checking with the pwn...
How to Install an Older Version of Next.js [with Pages Router]
Просмотров 6616 часов назад
Next.js often gets a new release with breaking changes. This video shows you how to install an older version of Next.js - v12.3.4 - that came with the Pages router by default. Donations: you can support this channel by buying me a coffee: ko-fi.com/abhinavr Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Discl...
Auth.js (next-auth) to Lucia Auth - some thoughts
Просмотров 14714 дней назад
Here are my thoughts on moving from Auth.js to Lucia Auth, which promotes implementing authentication from scratch. Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate. Discl...
How to Upload Files into AWS S3 from Next.js [S3 Setup, Cloudfront, and AWS-SDK]
Просмотров 3,4 тыс.11 месяцев назад
This video shows you how to setup an AWS S3 Bucket with Cloudfront CDN, then programmatically upload files into the bucket from a Next.js Application with the AWS SDK S3 Client package. 0:00 Introduction 1:00 Create Bucket 3:20 Setup Cloudfront Distribution 7:54 Custom Subdomain for Cloudfront with SSL 14:34 Creating IAM User 20:32 Next.js Application 22:46 Form Component 24:06 Generating acces...
Migrating a Headless WP Next.js Website from Pages Router to App Router
Просмотров 2,5 тыс.Год назад
This video shows you how I migrated a Next.js blog from the older Pages Router to the latest App Router, step-by-step. Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate. Di...
Pages Router vs App Router in Next.js - Key Differences
Просмотров 9 тыс.Год назад
Starting from version 13.4, Next.js moved to a new way of routing, based off of the app directory. This videos discusses the key things to keep in mind when transitioning. Donations: you can support this channel by buying me a coffee: ko-fi.com/abhinavr 0:00 Intro 0:48 Pages still supported 1:46 Folder-based Routing 3:23 _app & _document gone 4:28 Data Fetching 5:37 Static Site Generation (SSG)...
How to Implement Login With GitHub OAuth using PHP
Просмотров 903Год назад
This video shows how to implement GitHub OAuth that allows users to sign in on an application with their GitHub account. GitHub repo: github.com/iabhinavr/codelab/tree/master/app/public/oauth/github Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and k...
How OAuth Authentication Works
Просмотров 253Год назад
This video gives you a general overview on how OAuth authentication works. Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate. Disclosure: This video and its description may...
How to Create Alerts & Popups using JavaScript - using SweetAlert with examples
Просмотров 313Год назад
This video shows you how to create alert, confirmation, and prompt dialog boxes - using vanilla JavaScript, and using SweetAlert. Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% a...
How I Built a Blog CMS using Vanilla PHP, MySQL & JavaScript - User Login, Image Upload & more
Просмотров 1,4 тыс.Год назад
This video shows you how I built a blog website with just vanilla PHP, MySQL, and JavaScript. Going through the demo, followed by showing how to setup the demo on your system by cloning the Github repository. View project on Github: github.com/iabhinavr/phpcms Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Di...
How to Install Imagick Extension in PHP
Просмотров 4,9 тыс.Год назад
This videos shows how to install and enable the Imagick extension in PHP on an Ubunut server running the Nginx web server. Imagick is the PHP extension for ImageMagick, a software that allows image manipulations, like cropping, resizing, color corrections, etc. Donations: you can support this channel by buying me a coffee: ko-fi.com/abhinavr Website: www.coralnodes.com Server providers: Linode:...
Integrating Yoast SEO with Next.js Headless WordPress [part 20]
Просмотров 2,4 тыс.Год назад
This video is about adding the essential SEO tags to a Next.js site with the help of the Yoast SEO plugin. We'll add custom title, meta description and opengraph tags. Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences and knowledge. There is no guarantee...
How to add Google fonts in Next.js - Next.js + Headless WP [part 19]
Просмотров 663Год назад
This video shows you how to change the font in a Next.js site using the font module, which comes with the ability to self-host the font files. We'll replace the default fonts with a pair of Google Fonts. Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal experiences ...
On-demand Revalidation with Next.js & WordPress - Next.js + Headless WordPress [part 18]
Просмотров 1,5 тыс.Год назад
On-demand revalidation allows us to update an individual post in Next.js without rebuilding the whole site. Plugin used: github.com/iabhinavr/frontend-notifier Project repo: github.com/iabhinavr/CoolNomad-NextJS Website: www.coralnodes.com Server providers: Linode: www.coralnodes.com/go/linode/ DigitalOcean: www.coralnodes.com/go/digitalocean/ Disclaimer: This video is based on my personal expe...
Adding WordPress Commenting to Next.js using GraphQL Mutations - Next.js + Headless WP [part 17]
Просмотров 1,8 тыс.Год назад
Adding WordPress Commenting to Next.js using GraphQL Mutations - Next.js Headless WP [part 17]
How to Authenticate Next.js with WPGraphQL using JWTs - Next.js + Headless WordPress [ part 16]
Просмотров 3,8 тыс.Год назад
How to Authenticate Next.js with WPGraphQL using JWTs - Next.js Headless WordPress [ part 16]
How to Encode a String to Base64 - Step-by-step process & Use case in Javascript and PHP
Просмотров 247Год назад
How to Encode a String to Base64 - Step-by-step process & Use case in Javascript and PHP
How to Deploy a Next.js Application on a VPS Server - Next.js + Headless WordPress [ part 15]
Просмотров 15 тыс.Год назад
How to Deploy a Next.js Application on a VPS Server - Next.js Headless WordPress [ part 15]
Creating the Category Archive Pages - Next.js + Headless WordPress Blog [part 14]
Просмотров 1,4 тыс.Год назад
Creating the Category Archive Pages - Next.js Headless WordPress Blog [part 14]
Implementing Pagination (Load More Button) in a Next.js Blog [part 13]
Просмотров 5 тыс.Год назад
Implementing Pagination (Load More Button) in a Next.js Blog [part 13]
Form handling in Next.js - Headless WP + Next.js Blog [part 12]
Просмотров 1,4 тыс.Год назад
Form handling in Next.js - Headless WP Next.js Blog [part 12]
Creating the About page, and other Static Pages - Next.js + Headless WordPress Blog [part 11]
Просмотров 1,5 тыс.Год назад
Creating the About page, and other Static Pages - Next.js Headless WordPress Blog [part 11]
Adding formatting to the Content Area - Next.js + Headless WP Blog [part 10]
Просмотров 1,3 тыс.Год назад
Adding formatting to the Content Area - Next.js Headless WP Blog [part 10]
Creating the Single Post Pages - Next.js + Headless WordPress [part 9]
Просмотров 2,7 тыс.Год назад
Creating the Single Post Pages - Next.js Headless WordPress [part 9]
How to Convert Date Strings in Next.js / React - Next.js + WP [part 8]
Просмотров 3 тыс.Год назад
How to Convert Date Strings in Next.js / React - Next.js WP [part 8]
Next.js Tutorial - How to Fetch Posts from WordPress GraphQL API [part 7]
Просмотров 8 тыс.Год назад
Next.js Tutorial - How to Fetch Posts from WordPress GraphQL API [part 7]
How to Setup GraphQL API on WordPress - Headless WP using Next.js [Part 6]
Просмотров 7 тыс.Год назад
How to Setup GraphQL API on WordPress - Headless WP using Next.js [Part 6]
Creating the Home page with Tailwind CSS - Next.js + Headless WordPress Blog [Part 5]
Просмотров 3,8 тыс.Год назад
Creating the Home page with Tailwind CSS - Next.js Headless WordPress Blog [Part 5]
Routing in Next.js - Static and Dynamic Routes - Next.js + Headless WordPress [Part 4]
Просмотров 3,9 тыс.Год назад
Routing in Next.js - Static and Dynamic Routes - Next.js Headless WordPress [Part 4]

Комментарии

  • @nutonchakma9626
    @nutonchakma9626 День назад

    Sir please make a video using wordpress rest api and nextjs google auth.

  • @dmitrym840
    @dmitrym840 6 дней назад

    hi, can I ask you to help me write a chat for authorized users, I've been studying php for a year, it's very difficult for me

    • @CodingReflections
      @CodingReflections 6 дней назад

      by authorized users, do you mean a one to one chat app with php?

    • @dmitrym840
      @dmitrym840 16 часов назад

      @CodingReflections can you help with web application for communication and dating

  • @dreamecho100
    @dreamecho100 9 дней назад

    I love lucia-auth, I was a little sad when they decided to deprecate it but at least it turned to a learning resources I have tried to make an abstraction based on the tutorial and the examples where the core functionality is on directory, and there are other specific framework directories that uses it _(Next.js for now)_ It's working, but it needs refactoring for the code structure 😅

  • @mati124
    @mati124 14 дней назад

    Omg you saved me like 10 hours with this video, thanks

  • @mati124
    @mati124 14 дней назад

    good video helped a lot

  • @henrysalvatore4251
    @henrysalvatore4251 18 дней назад

    Thank you so much Sir.. your method is much easy.. Sir please create a tutorial on how you can access the stored data from database on demand

  • @kelechinwuba-onyejeana1549
    @kelechinwuba-onyejeana1549 26 дней назад

    Thanks for this wonderful piece. I will like to see the implementation for one-to-one chat.

  • @World_ofKnowledge
    @World_ofKnowledge Месяц назад

    beset tutorial so far, please update with news version

  • @World_ofKnowledge
    @World_ofKnowledge Месяц назад

    when we creating the folder with next js, in latest code . we see different folder structure

  • @lazyclam5232
    @lazyclam5232 Месяц назад

    very informative, thanks!

  • @leewebs8566
    @leewebs8566 Месяц назад

    [postSlug].js inside blog will not work, create [id] folder inside blog, then page.js , then put your contents.

    • @dandingerat
      @dandingerat 8 дней назад

      thanks, i think this is an App Router thing

  • @teson2000
    @teson2000 Месяц назад

    Thank you so much for putting this here. Much appreciated!

  • @Stuart-to9li
    @Stuart-to9li Месяц назад

    Excellent tutorial. Have you done similar with google?

  • @kelechinwuba-onyejeana1549
    @kelechinwuba-onyejeana1549 Месяц назад

    I like your use of vanilla codes to teach programming. Continue with vanilla so those of us who prefer it will come to your page

  • @Carol-r7k
    @Carol-r7k Месяц назад

    2316 Thiel Hollow

  • @spesialremixkaraoke
    @spesialremixkaraoke Месяц назад

    thanks sir..nice tutorial,

  • @AhmedParvez-bs4cu
    @AhmedParvez-bs4cu 2 месяца назад

    I am geeting issue when use the shortcode in the posts, how to fix it? or do you have any video on it?Please

  • @lampucoklat
    @lampucoklat 2 месяца назад

    why i get this message SSL certificate problem: self-signed certificate in certificate chain

  • @hmjahir77
    @hmjahir77 2 месяца назад

    you lr voice was recorded later and the speed sucks. shitty tutorial. if u ca not make a proper video, jut Don't make it.

  • @brothersonnaiki5938
    @brothersonnaiki5938 2 месяца назад

    The clearest video explanation on this subject. Thank you mister

  • @terrycarson
    @terrycarson 2 месяца назад

    The best info....thanks

  • @kavinduliyanaarachchi99
    @kavinduliyanaarachchi99 2 месяца назад

    Can anybody help me with this error "TypeError: Cannot read properties of undefined (reading 'nodes')"

  • @timhowe7825
    @timhowe7825 2 месяца назад

    Extremely helpful thank you!

  • @thinh0coi
    @thinh0coi 3 месяца назад

    I love your VS Code theme! What is it?

  • @MusiMD-u5u
    @MusiMD-u5u 3 месяца назад

    Hi bro.. how to fetch logo from wordpress

  • @mao13132
    @mao13132 3 месяца назад

    Спасибо дружище!

  • @muratasarslan2359
    @muratasarslan2359 4 месяца назад

    still no Typescript ? 😥

  • @StefanoBallad
    @StefanoBallad 4 месяца назад

    Great lesson also on Tailwind! Thank you!

  • @zeeeeeman
    @zeeeeeman 5 месяцев назад

    Well done. Aws is a maze and you've explained this really well.

  • @roko98332r
    @roko98332r 5 месяцев назад

    could you deploy these next js into vercel. pointing hostinger domains while having wp-backend on hostinger

  • @Comondor-Tika
    @Comondor-Tika 5 месяцев назад

    Thank you very much. Your tutorial is very helpfull. I am waiting new lessons.

  • @rezaastaraky8376
    @rezaastaraky8376 5 месяцев назад

    Excellent thanks

  • @akhtarhossain8025
    @akhtarhossain8025 6 месяцев назад

    I have been searching for days for a tutorial like this. Thank you so much. Very precise and useful for someone with basic curl knowledge. Thanks.

  • @danieladam4719
    @danieladam4719 6 месяцев назад

    Thank you, works perfect!:)

  • @codecobber1107
    @codecobber1107 6 месяцев назад

    Great video, many thanks

  • @developerap6033
    @developerap6033 6 месяцев назад

    Very good explanation easy and short. All major part covered Thank you!

  • @borsos_ilo
    @borsos_ilo 6 месяцев назад

    Thank you! You showed a really nice way of how to apply styling to post content, previously I was trying to parse the HTML returned by WPGraphQL but this way is so much neater!

  • @websitesbysagar
    @websitesbysagar 6 месяцев назад

    Hi, first of all thank you for this coding tutorial. I am building my own blog and I am planning to add google ads in it. can I use SSG or I have to use SSR to show ads?

  • @goodnewsjohn2482
    @goodnewsjohn2482 7 месяцев назад

    if i pass this test i am coming back with my testimony... nice tutorials. I watched more than two times. Thanks

  • @mahmoudibrahim9803
    @mahmoudibrahim9803 7 месяцев назад

    Thank you, great content

  • @OwlthTech
    @OwlthTech 7 месяцев назад

    In this WP seems hosted on different server with subdomain, so why there doesn't have any CORS error?

    • @CodingReflections
      @CodingReflections 7 месяцев назад

      From what I have learnt, CORS is a mechanism implemented on browsers to prevent web pages from making requests to another domain. But in this case, the next.js frontend (browser) is making requests to the next.js server itself (same domain), which in turn make requests to the WP backend (subdomain). So the browser is not directly making any requests to the wp subdomain, hence no errors. CORS is not applicable for server-to-server communication.

  • @MarioMoreno-w2w
    @MarioMoreno-w2w 7 месяцев назад

    How did you manage to solve the CORS policy error when using localhost?

    • @CleverGeneration
      @CleverGeneration 3 месяца назад

      I had the same issue.. To solve it, simply go into the s3 bucket -> permissions -> scroll down to CORS section -> press edit -> paste the following: [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "POST", "PUT", "DELETE", "HEAD" ], "AllowedOrigins": [ "localhost:3000" ], "ExposeHeaders": [] } ]

  • @xen.7140
    @xen.7140 7 месяцев назад

    Try downloading your Github repo, it doesn't work. Fetch failed every time. Also, the "catetory" typo is in the repo as well (fixing it doesn't solve the fetching issue)

    • @CodingReflections
      @CodingReflections 7 месяцев назад

      Have you changed the fetch url to your wordpress installation url under lib/graphqlRequest.js? Otherwise fetch will fail because it is pointing to my wp url. If not, you can find the wp backup files in the repo, which you can use to install a copy of the wordpress site on your localhost or remote server. As you said, the typo - "getCatetory" - has nothing to do with the fetching issue since it is only the query name, which can be anything. Anyway, I have fixed it, thanks for pointing that out.

    • @xen.7140
      @xen.7140 7 месяцев назад

      @@CodingReflections I tried running it with your URL and then changed it to mine, still fails. The error is always fetch related. The default Nextjs ISR WP blog template works and fetches properly, but doesn't have category archives that I'm trying to add EDIT: Works now! This is the error I was getting: Server Error Error: A required parameter (slug) was not provided as a string received undefined in getStaticPaths for /category/[slug] This error happened while generating the page. Any console logs will be displayed in the terminal window. This is what Github Copilot came up with and it fixed it: "In your getStaticPaths function, you're mapping over categories and for each category, you're returning an object with params that contains categoryName: category.slug. However, the error message suggests that the function is expecting a slug parameter, not a categoryName In this updated code, I've changed categoryName: category.slug to slug: category.slug to match the expected slug parameter." return { paths: categories.map((category) => ( { params: { slug: category.slug } } )), fallback: false, }

  • @regilearn2138
    @regilearn2138 7 месяцев назад

    can u use lambda function for this. for next video

  • @phoolchandprajapat-l5l
    @phoolchandprajapat-l5l 7 месяцев назад

    Need to add headless plugin just add this code in functions.php add_action('template_redirect', 'redirect_to_login_if_not_logged_in'); function redirect_to_login_if_not_logged_in() { if (!is_user_logged_in() && !is_admin()) { auth_redirect(); } }

  • @milkboxshow1416
    @milkboxshow1416 7 месяцев назад

    is there a way to use useFormState with the pages router version of next.js? Or an appropriate modification that would allow file uploads using the pages router?

  • @preetbajwa2629
    @preetbajwa2629 7 месяцев назад

    can we use custom post type in headless cms

  • @mrchedda
    @mrchedda 7 месяцев назад

    Hey. Thanks for the video! Question... can you fetch non HTML value for content or excerpt with authentication? Also.. can you add the wp-config.php constants by SSH-ing to the WP staging instance or does it have to be a custom hosted WP instance? Thanks!

  • @adeolaabdulramon9251
    @adeolaabdulramon9251 7 месяцев назад

    Thanks for this content. But could you please do a crash course beginners friendly on Next.JS 14 for frontend and WordPress for backend thank you.

  • @ivaylopetrov9956
    @ivaylopetrov9956 8 месяцев назад

    Great work man 🚀