- Видео 69
- Просмотров 391 209
Coding Reflections
Индия
Добавлен 29 мар 2020
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...
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]
Sir please make a video using wordpress rest api and nextjs google auth.
Sure, I'll try.
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
by authorized users, do you mean a one to one chat app with php?
@CodingReflections can you help with web application for communication and dating
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 😅
Omg you saved me like 10 hours with this video, thanks
good video helped a lot
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
Thanks for this wonderful piece. I will like to see the implementation for one-to-one chat.
beset tutorial so far, please update with news version
when we creating the folder with next js, in latest code . we see different folder structure
very informative, thanks!
[postSlug].js inside blog will not work, create [id] folder inside blog, then page.js , then put your contents.
thanks, i think this is an App Router thing
Thank you so much for putting this here. Much appreciated!
Excellent tutorial. Have you done similar with google?
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
2316 Thiel Hollow
thanks sir..nice tutorial,
I am geeting issue when use the shortcode in the posts, how to fix it? or do you have any video on it?Please
why i get this message SSL certificate problem: self-signed certificate in certificate chain
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.
The clearest video explanation on this subject. Thank you mister
The best info....thanks
Can anybody help me with this error "TypeError: Cannot read properties of undefined (reading 'nodes')"
Extremely helpful thank you!
I love your VS Code theme! What is it?
Hi bro.. how to fetch logo from wordpress
Спасибо дружище!
still no Typescript ? 😥
Great lesson also on Tailwind! Thank you!
Well done. Aws is a maze and you've explained this really well.
could you deploy these next js into vercel. pointing hostinger domains while having wp-backend on hostinger
Thank you very much. Your tutorial is very helpfull. I am waiting new lessons.
Excellent thanks
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.
Thank you, works perfect!:)
Great video, many thanks
Very good explanation easy and short. All major part covered Thank you!
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!
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?
if i pass this test i am coming back with my testimony... nice tutorials. I watched more than two times. Thanks
Thank you, great content
In this WP seems hosted on different server with subdomain, so why there doesn't have any CORS error?
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.
How did you manage to solve the CORS policy error when using localhost?
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": [] } ]
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)
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.
@@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, }
can u use lambda function for this. for next video
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(); } }
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?
can we use custom post type in headless cms
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!
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.
Great work man 🚀
Where you able to complete yours??