Make complete Password less SMS-OTP based Login system in React and Nodejs with JWT Token

In this video we are going to discuss about how can you make a login system without the use of password. Instead we will use sms based otp login system using Twilio SMS API and many more such things

🚀 Essential Links :

  1. Twilio account registration (affiliate link) : https://twilio.com/referral/0a87YT
  2. GitHub Repo : https://github.com/MeRahulAhire/React-Node-Passwordless-Auth
  3. SMS OTP verification without using a database : https://blog.anam.co/otp-verification-without-using-a-database

📑 References:

  1. Twilio and Node - Send Your First Text Message (James Q Quick) : https://www.youtu.be/26X0rVLo6gc
  2. Using HttpOnly cookies in React & Node | Storing JWT Tokens or SessionID Securely (Rahul Ahire) : https://youtu.be/a5Krfkfl9MM
  3. JWT Authentication using Refresh, Access Tokens - NodeJS (Mano Sriram) : https://youtu.be/h7oVLne3J8Y
  4. JWT Authentication Tutorial - Node.js (Web Dev Simplified) : https://youtu.be/mbsmsi7l3r4
  5. Multi Step Form With React & Material UI (Traversy Media) : https://youtu.be/zT62eVxShsY

The whole journey of making facemash: https://www.youtube.com/playlist?list=PL83X-jRLQqGGTDlCmLLzgnLpMY3xo1Nj8

Checkout the other videos of DevTalks: https://www.youtube.com/playlist?list=PL83X-jRLQqGGOXn5eJU_JJTlXUyC3gXQB

If you have any suggestions, Queries or any though just leave it in comment and I’ll be happy to get back to you
#PasswordlessLogin #Twilio #MiniFullstackProject

⌚ Topics Covered :
0:00 - Intro and Demo of this project
2:15 - Understanding the Intuition
9:40 - Getting started and installing packages
12:15 - Gathering Twilio Credentials
15:15 - Setting up .env
19:20 - Initialising packages
24:00 - sendOTP Route
32:15 - Trying to send OTP in Postman
34:30 - verifyOTP Route
43:40 - JWT Tokens and sending them via HttpOnly Cookie
49:43 - Testing JWT Token in Postman
52:10 - JWT accessToken middleware
56:50 - Refresh Route for refreshing JWT Token
1:04:57 - Logout Route
1:08:36 - Client Side and Installing Axios
1:10:20 - Setting up CORS
1:12:00 - Making step form and state management
1:28:05 - Making request from Axios
1:31:18 - Getting Hash and storing it in state
1:31:49 - Verifying OTP
1:37:12 - Getting HttpOnly cookie in Browser
1:38:45 - Checking if we are logged in
1:49:20 - Implementing Logout
1:52:28 - Ending words… Like, Share and Subscribe

FIND ME HERE:
Facebook: https://facebook.com/MeRahulAhire
Instagram: https://instagram.com/merahulahire
Twitter: https://twitter.com/MeRahulAhire
LinkedIn: https://linkedin.com/in/merahulahire

#nodejs #passwordlesslogin #minifullstackproject #twilio #react #jwt token

What is GEEK

Buddha Community

Make complete Password less SMS-OTP based Login system in React and Nodejs with JWT Token
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Make complete Password less SMS-OTP based Login system in React and Nodejs with JWT Token

In this video we are going to discuss about how can you make a login system without the use of password. Instead we will use sms based otp login system using Twilio SMS API and many more such things

🚀 Essential Links :

  1. Twilio account registration (affiliate link) : https://twilio.com/referral/0a87YT
  2. GitHub Repo : https://github.com/MeRahulAhire/React-Node-Passwordless-Auth
  3. SMS OTP verification without using a database : https://blog.anam.co/otp-verification-without-using-a-database

📑 References:

  1. Twilio and Node - Send Your First Text Message (James Q Quick) : https://www.youtu.be/26X0rVLo6gc
  2. Using HttpOnly cookies in React & Node | Storing JWT Tokens or SessionID Securely (Rahul Ahire) : https://youtu.be/a5Krfkfl9MM
  3. JWT Authentication using Refresh, Access Tokens - NodeJS (Mano Sriram) : https://youtu.be/h7oVLne3J8Y
  4. JWT Authentication Tutorial - Node.js (Web Dev Simplified) : https://youtu.be/mbsmsi7l3r4
  5. Multi Step Form With React & Material UI (Traversy Media) : https://youtu.be/zT62eVxShsY

The whole journey of making facemash: https://www.youtube.com/playlist?list=PL83X-jRLQqGGTDlCmLLzgnLpMY3xo1Nj8

Checkout the other videos of DevTalks: https://www.youtube.com/playlist?list=PL83X-jRLQqGGOXn5eJU_JJTlXUyC3gXQB

If you have any suggestions, Queries or any though just leave it in comment and I’ll be happy to get back to you
#PasswordlessLogin #Twilio #MiniFullstackProject

⌚ Topics Covered :
0:00 - Intro and Demo of this project
2:15 - Understanding the Intuition
9:40 - Getting started and installing packages
12:15 - Gathering Twilio Credentials
15:15 - Setting up .env
19:20 - Initialising packages
24:00 - sendOTP Route
32:15 - Trying to send OTP in Postman
34:30 - verifyOTP Route
43:40 - JWT Tokens and sending them via HttpOnly Cookie
49:43 - Testing JWT Token in Postman
52:10 - JWT accessToken middleware
56:50 - Refresh Route for refreshing JWT Token
1:04:57 - Logout Route
1:08:36 - Client Side and Installing Axios
1:10:20 - Setting up CORS
1:12:00 - Making step form and state management
1:28:05 - Making request from Axios
1:31:18 - Getting Hash and storing it in state
1:31:49 - Verifying OTP
1:37:12 - Getting HttpOnly cookie in Browser
1:38:45 - Checking if we are logged in
1:49:20 - Implementing Logout
1:52:28 - Ending words… Like, Share and Subscribe

FIND ME HERE:
Facebook: https://facebook.com/MeRahulAhire
Instagram: https://instagram.com/merahulahire
Twitter: https://twitter.com/MeRahulAhire
LinkedIn: https://linkedin.com/in/merahulahire

#nodejs #passwordlesslogin #minifullstackproject #twilio #react #jwt token

Ayan Code

1656193861

Simple Login Page in HTML and CSS | Source Code

Hello guys, Today in this post we’ll learn How to Create a Simple Login Page with a fantastic design. To create it we are going to use pure CSS and HTML. Hope you enjoy this post.

A login page is one of the most important component of a website or app that allows authorized users to access an entire site or a part of a website. You would have already seen them when visiting a website. Let's head to create it.

Whether it’s a signup or login page, it should be catchy, user-friendly and easy to use. These types of Forms lead to increased sales, lead generation, and customer growth.


Demo

Click to watch demo!

Simple Login Page HTML CSS (source code)

<!DOCTYPE html>
  <html lang="en" >
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="styledfer.css">
  </head>

  <body>
   <div id="login-form-wrap">
    <h2>Login</h2>
    <form id="login-form">
      <p>
      <input type="email" id="email" name="email" placeholder="Email " required><i class="validation"><span></span><span></span></i>
      </p>
      <p>
      <input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i>
      </p>
      <p>
      <input type="submit" id="login" value="Login">
      </p>

      </form>
    <div id="create-account-wrap">
      <p>Don't have an accout? <a href="#">Create One</a><p>
    </div>
   </div>
    
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js'></script>
  </body>
</html>

CSS CODE

body {
  background-color: #020202;
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2b3e51;
}
h2 {
  font-weight: 300;
  text-align: center;
}
p {
  position: relative;
}
a,
a:link,
a:visited,
a:active {
  color: #ff9100;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
a:focus, a:hover,
a:link:focus,
a:link:hover,
a:visited:focus,
a:visited:hover,
a:active:focus,
a:active:hover {
  color: #ff9f22;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#login-form-wrap {
  background-color: #fff;
  width: 16em;
  margin: 30px auto;
  text-align: center;
  padding: 20px 0 0 0;
  border-radius: 4px;
  box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
}
#login-form {
  padding: 0 60px;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
}
#email,
#password {
  width: 100%;
  padding: 0 0 0 10px;
  margin: 0;
  color: #8a8b8e;
  border: 1px solid #c2c0ca;
  font-style: normal;
  font-size: 16px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  background: none;
}
#email:focus,
#password:focus {
  border-color: #3ca9e2;
}
#email:focus:invalid,
#password:focus:invalid {
  color: #cc1e2b;
  border-color: #cc1e2b;
}
#email:valid ~ .validation,
#password:valid ~ .validation 
{
  display: block;
  border-color: #0C0;
}
#email:valid ~ .validation span,
#password:valid ~ .validation span{
  background: #0C0;
  position: absolute;
  border-radius: 6px;
}
#email:valid ~ .validation span:first-child,
#password:valid ~ .validation span:first-child{
  top: 30px;
  left: 14px;
  width: 20px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#email:valid ~ .validation span:last-child
#password:valid ~ .validation span:last-child
{
  top: 35px;
  left: 8px;
  width: 11px;
  height: 3px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.validation {
  display: none;
  position: absolute;
  content: " ";
  height: 60px;
  width: 30px;
  right: 15px;
  top: 0px;
}
input[type="submit"] {
  border: none;
  display: block;
  background-color: #ff9100;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 18px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
input[type="submit"]:hover {
  background-color: #ff9b17;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#create-account-wrap {
  background-color: #eeedf1;
  color: #8a8b8e;
  font-size: 14px;
  width: 100%;
  padding: 10px 0;
  border-radius: 0 0 4px 4px;
}

Congratulations! You have now successfully created our Simple Login Page in HTML and CSS.

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Connecting React Native App to NodeJS Backend API | Expo React Native Login System #4

We look at how to connect a react native expo login application to a backend API server. The fourth part of a 6-part series of building a login app using react native.
Please like ( at least :) ) and subscribe.

We see how to connect react native to backend. In this case, we connect our frontend react native login application to a nodejs and mongodb backend that is hosted on heroku. We created it from scratch in this video below.

Other Parts of this Expo React Native Login series

Create NodeJS Login Backend

Send emails using node js

Get the source code files

Publish Expo React Native App to Play Store

Tool for my thumbnail & images *

Setup Expo and React Native

Setup NodeJS

Create an Expo React Native Todo App

Create ReactJS Login system Web App

One Expo React Native Trick

Finally understand Git and GitHub

Host a website for FREE

Combine NodeJS and MySQL

#reactnative #loginpage

FOLLOW US:
Buy me a coffee :)

Twitter

Instagram

GitHub

YouTube

  • Design tool link is an affiliate link which means I might earn a little commission if you choose to use the tool with it.

#nodejs #expo react #react #system #react native

How To Set Up Two-Factor Authentication in cPanel

What is 2FA
Two-Factor Authentication (or 2FA as it often referred to) is an extra layer of security that is used to provide users an additional level of protection when securing access to an account.
Employing a 2FA mechanism is a vast improvement in security over the Singe-Factor Authentication method of simply employing a username and password. Using this method, accounts that have 2FA enabled, require the user to enter a one-time passcode that is generated by an external application. The 2FA passcode (usually a six-digit number) is required to be input into the passcode field before access is granted. The 2FA input is usually required directly after the username and password are entered by the client.

#tutorials #2fa #access #account security #authentication #authentication method #authentication token #cli #command line #cpanel #feature manager #google authenticator #one time password #otp #otp authentication #passcode #password #passwords #qr code #security #security code #security policy #security practices #single factor authentication #time-based one-time password #totp #two factor authentication #whm