Zak Dyer

Zak Dyer

1644293702

Web3 Authentication via Email

How to Do Web3 Authentication via Email?

In this article, we break down Web3 authentication via email. Moralis' support for passwordless authentication solutions allows for great login experiences!

Incorporating elements from the Web2 space to the Web3 realm would be highly beneficial. By implementing features that regular users are familiar with, blockchain adoption will come sooner rather than later. One of such features that Web2 users are familiar with is email authentication. However, since blockchain authentication is often limited to Web3 wallets, would it perhaps be possible to achieve Web3 authentication via email? Fortunately, there is a seamless way to do email authentication for Web3. Furthermore, you can quickly implement Web3 login with an email option with the proper tools. By implementing this authentication method into dApps, the general public will be more inclined to adopt Web3, as they’ll be more willing to utilize platforms that use familiar authentication features.

Moving forward, you’ll learn the details about the tools that make Web3 login with email possible. The key to this feature is the ultimate Web3 development platform – Moralis, and its integration of Magic (Magic Labs). Furthermore, we’ll show you a demo of Web3 authentication via email. That way, you’ll see how things function once set in place. In addition, we’ll also take on an example project. As such, we’ll show you how to implement this login method into your dApps (decentralized applications). With that skill under your belt, you will be able to use this user-friendly login option for all your future Web3 apps. Moreover, you will have a chance to enable Web3 login with email for any of your existing dApps built with Moralis. Now, in case this is your first encounter with Moralis (a.k.a. Firebase for crypto), make sure to create your free account before moving on.  

Web3 Authentication via Email

As mentioned above, Moralis’ integration of Magic is a powerhouse when it comes to Web3 login with email. The combination of these two tools enables you to offer users a familiar login method on the frontend. In addition, these tools automatically create a unique Web3 wallet address on the backend. The latter enables users to fully engage in all that Web3 has to offer. Now, the best way to get a full grasp of how Web3 authentication via email functions is to take a look at a demo.

Web3 Login with Email Demo

For the purpose of this demo, we created a pretty simple login page:

As you can see from looking at the image above, our login page has an email address entry field and a login button. You probably agree that most average users would intuitively know to enter their email address and click the button, right?

After clicking the button, the authentication process starts. The latter includes a couple of automated actions. First, a pop-up window is shown to the users:

The message instructs the user to check their email inbox. Hence, the second automated part is sending the user an authentication email. This email can be fully customized; however, by default, you are looking at something like this:

As depicted in the screenshot above, users must click on the login button (link) within the authentication email. After clicking the link, users will be logged in and see the following message:

Successful Web3 Authentication via Email

By following the instructions in the above pop-up message, users need to return to the original tab. From this point on, it’s up to you to create a dashboard of your choice. As such, you get to decide what logged-in users see. For the sake of this demo, we decided to display users’ account addresses and their balances. Moreover, we’ve also included three buttons: refresh, sign out, and one to perform test transfers:

The purpose of the above screenshot is to show you that this type of Web3 login with email really works. As you can see, we get all the information needed (address and balance) to perform all sorts of Web3 functionalities. For instance, we can easily transfer assets. Moreover, to prove that sending assets is possible, we click on the “Test Transfer” button. A confirmation message confirms our action:

The image above even shows you the MetaMask wallet we’ve sent test assets to. Furthermore, Magic even enables us to avoid dealing with seed words or passwords for a seamless user experience. Hence, for users, things can be as simple as entering an email address and clicking on a confirmation link. 

Why Implement Web3 Authentication via Email?

If you’ve used any Web3 applications, you are most likely familiar with Web3 authentication or Web3 login. You know that it typically requires you to sign a confirmation message using a hot wallet such as MetaMask. While this is a simple process for users that already have wallet extensions set up, it can be a rather overwhelming task for newcomers. Hence, offering your users a method that they are completely familiar with has its advantages. As such, you should consider offering Web3 authentication via email in dApps that are catering to users new to Web3.

How to Do Web3 Authentication via Email – A Step-by-Step Overview

Now that you know how practical Web3 login with email can be for new users, it’s time to see how to implement it. Moreover, if you’ve already created dApps with Moralis in the past, you can easily implement Web3 authentication via email. After following our lead herein, we recommend you dive deeper into Moralis’ documentation. So, here are the steps you need to follow:

  1. Get your Magic API key by visiting the official Magic website. Click on the “Get Started” button and complete the registration procedure:

With your Magic account created, you will get access to your API key.

  1. Next, you need to add the Magic SDK to your project. Depending on your project, you can do this either with the script (when you imported Moralis’ SDK via CDN) or via NPM (when you imported Moralis’ SDK via NPM):
    1. Via CDN: <script src=”https://auth.magic.link/sdk”></script>
    2. Via NPM: npm install magic-sdk
  2. Use the following lines of code:
const user = await Moralis.authenticate({ 
  provider: "magicLink",
  email: "example@email.com",
  apiKey: "pk_xxxxx",
  network: "kovan",
})

Looking at the lines of code above, you can see that it requires a couple of parameters. If you want to use Magic links, “magicLink” is what you need to use next to “provider”. Next to “email”, you need to use the email address of a user that wants to log in. As such, you’ll need to connect this parameter with the email capture field. Next to “apiKey”, you paste your Magic API key. Finally, next to “network”, you get to choose between the mainnet (Ethereum) and one of the Ethereum testnets. 

Web3 Login with Email – An Example Project

Note: To follow along easily, make sure to use the code provided for the sake of this example project. This is the same project as presented in the demo above. It is available on our GitHub page.

As you can see, offering Web3 login with email in your dApps is quite simple when using Moralis. All it takes are the above three steps. Let’s now take on an example project. In case you haven’t done so yet, make sure to complete the first two steps from the previous section. Next, use the “SignIn.js” file, which we’ve created for the sake of this example project. This is where we need to implement the lines from the third step of the previous section:

  const [email, setEmail] = useState("rayyan@moralis.io");

  const handleCustomLogin = async () => {
    await authenticate({
      provider: "magicLink",
      email: email,
      apiKey: "",
      network: "kovan",
    });
  };

Note: Make sure to use your own Magic API key next to “apiKey”.

Moralis’ Web3 Authentication via Email Feature

Those of you who have been creating phenomenal dApps with the help of Moralis before can implement Web3 authentication via email (as instructed above) right away. However, if you are new to Moralis, you first need to complete some basic setup steps. As such, let us guide you through the initial Moralis setup.

Moralis Initial Setup – Part 1 

  1. Create Your Free Moralis Account – Use the link to the left to access the signup page. Then, create your free account by entering your email address and creating your password. Also, make sure to confirm your account (click on the confirmation link sent to your email). However, in case you already have an active Moralis account, just log in.
  2. Create a New Server – Once you’ve successfully logged in to your Moralis admin area, go to the “Servers” tab. There, click on the “+ Create a new Server” button in the top-right corner. From the drop-down menu that appears, select the network type that suits your needs (see the image below). When working on example projects or early stages of your own projects, going with the “Testnet Server” option makes the most sense.

With the server type selected, enter your server’s details in the new pop-up window. You need to give your server a name, then select your region, network, and chain(s):

Finally, you need to spin up your server by clicking on the “Add Instance” button. Please note that it can take some time for the server to start. 

Moralis Initial Setup – Part 2 

  1. Access Server Details – With your Moralis server up and running, most of the Moralis features become available to you. Among others, you get to access your server’s details. For that purpose, you need to click on the “View Details” button next to your server name:


After clicking on “View Details”, a new pop-up window will present you with your server URL, application ID, and more. This is also where you can access the Moralis “sync” feature. Moreover, you get to copy the details in question by using the copy icons:

  1. Initialize Moralis – You now need to initialize Moralis and unleash the full power of its SDK. This includes the ultimate NFT API. So, you need to populate your coding file with your server’s details. When you are building your dApp from scratch, this will be a “.html”, “.jsx”, or “.js” file. However, taking the ultimate shortcut by using the most practical Web3 boilerplate, you’ll be populating the “.env” file. As such, copy and paste your Moralis server’s details (application ID and server URL):
    1. When using the ultimate Web3 boilerplate:

  1. When creating dApps from scratch (“.js” file):

Note: Do NOT use the details from the image above. Instead, make sure to use the details of your server.

Web3 Login with Email and Your dApps

As mentioned in the final step of the initial Moralis setup sequence, you have two options when it comes to creating dApps. Thus, you may use the Moralis Web3 API to build dApps from scratch or use the ultimate Ethereum dApp boilerplate. Each of the two options has its own advantages. For instance, when starting from scratch, you have complete freedom to create a unique UI. Hence, it is the way to go when a unique appearance is your primary goal. 

On the other hand, you can use components with a user-ready UI when working with the boilerplate. As such, the latter enables you to have a dApp with a neat UI up and running in minutes. Thus, the boilerplate offers you the path of least resistance. Moreover, it is the way to go when functionality in the shortest time possible is your prime concern. If that sounds interesting, we recommend checking out our boilerplate projects. 

How to Do Web3 Authentication via Email – Summary

At this point, you are probably really excited. Knowing that there’s a way to onboard users to Web3 applications with them basically not knowing anything about crypto wallets is quite incredible. Furthermore, combine this with the simplicity of creating dApps with Moralis, and you have a decent arsenal on your hands. 

Original article source at https://moralis.io

#web3 #blockchain #javascript #moralis #dapp #email 

What is GEEK

Buddha Community

Web3 Authentication via Email

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.

German Donnelly

German Donnelly

1592807820

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

Django Packages

Django Packages

1640257440

Django-allauth: A simple Boilerplate to Setup Authentication

Django-Authentication 

A simple Boilerplate to Setup Authentication using Django-allauth, with a custom template for login and registration using django-crispy-forms.

Getting Started

Prerequisites

  • Python 3.8.6 or higher

Project setup

# clone the repo
$ git clone https://github.com/yezz123/Django-Authentication

# move to the project folder
$ cd Django-Authentication

Creating virtual environment

  • Create a virtual environment for this project:
# creating pipenv environment for python 3
$ virtualenv venv

# activating the pipenv environment
$ cd venv/bin #windows environment you activate from Scripts folder

# if you have multiple python 3 versions installed then
$ source ./activate

Configured Enviromment

Environment variables

SECRET_KEY = #random string
DEBUG = #True or False
ALLOWED_HOSTS = #localhost
DATABASE_NAME = #database name (You can just use the default if you want to use SQLite)
DATABASE_USER = #database user for postgres
DATABASE_PASSWORD = #database password for postgres
DATABASE_HOST = #database host for postgres
DATABASE_PORT = #database port for postgres
ACCOUNT_EMAIL_VERIFICATION = #mandatory or optional
EMAIL_BACKEND = #email backend
EMAIL_HOST = #email host
EMAIL_HOST_PASSWORD = #email host password
EMAIL_USE_TLS = # if your email use tls
EMAIL_PORT = #email port

change all the environment variables in the .env.sample and don't forget to rename it to .env.

Run the project

After Setup the environment, you can run the project using the Makefile provided in the project folder.

help:
 @echo "Targets:"
 @echo "    make install" #install requirements
 @echo "    make makemigrations" #prepare migrations
 @echo "    make migrations" #migrate database
 @echo "    make createsuperuser" #create superuser
 @echo "    make run_server" #run the server
 @echo "    make lint" #lint the code using black
 @echo "    make test" #run the tests using Pytest

Preconfigured Packages

Includes preconfigured packages to kick start Django-Authentication by just setting appropriate configuration.

PackageUsage
django-allauthIntegrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
django-crispy-formsdjango-crispy-forms provides you with a crispy filter and {% crispy %} tag that will let you control the rendering behavior of your Django forms in a very elegant and DRY way.

Contributing

  • Django-Authentication is a simple project, so you can contribute to it by just adding your code to the project to improve it.
  • If you have any questions, please feel free to open an issue or create a pull request.

Download Details:
Author: yezz123
Source Code: https://github.com/yezz123/Django-Authentication
License: MIT License

#django #python 

Zak Dyer

Zak Dyer

1644293702

Web3 Authentication via Email

How to Do Web3 Authentication via Email?

In this article, we break down Web3 authentication via email. Moralis' support for passwordless authentication solutions allows for great login experiences!

Incorporating elements from the Web2 space to the Web3 realm would be highly beneficial. By implementing features that regular users are familiar with, blockchain adoption will come sooner rather than later. One of such features that Web2 users are familiar with is email authentication. However, since blockchain authentication is often limited to Web3 wallets, would it perhaps be possible to achieve Web3 authentication via email? Fortunately, there is a seamless way to do email authentication for Web3. Furthermore, you can quickly implement Web3 login with an email option with the proper tools. By implementing this authentication method into dApps, the general public will be more inclined to adopt Web3, as they’ll be more willing to utilize platforms that use familiar authentication features.

Moving forward, you’ll learn the details about the tools that make Web3 login with email possible. The key to this feature is the ultimate Web3 development platform – Moralis, and its integration of Magic (Magic Labs). Furthermore, we’ll show you a demo of Web3 authentication via email. That way, you’ll see how things function once set in place. In addition, we’ll also take on an example project. As such, we’ll show you how to implement this login method into your dApps (decentralized applications). With that skill under your belt, you will be able to use this user-friendly login option for all your future Web3 apps. Moreover, you will have a chance to enable Web3 login with email for any of your existing dApps built with Moralis. Now, in case this is your first encounter with Moralis (a.k.a. Firebase for crypto), make sure to create your free account before moving on.  

Web3 Authentication via Email

As mentioned above, Moralis’ integration of Magic is a powerhouse when it comes to Web3 login with email. The combination of these two tools enables you to offer users a familiar login method on the frontend. In addition, these tools automatically create a unique Web3 wallet address on the backend. The latter enables users to fully engage in all that Web3 has to offer. Now, the best way to get a full grasp of how Web3 authentication via email functions is to take a look at a demo.

Web3 Login with Email Demo

For the purpose of this demo, we created a pretty simple login page:

As you can see from looking at the image above, our login page has an email address entry field and a login button. You probably agree that most average users would intuitively know to enter their email address and click the button, right?

After clicking the button, the authentication process starts. The latter includes a couple of automated actions. First, a pop-up window is shown to the users:

The message instructs the user to check their email inbox. Hence, the second automated part is sending the user an authentication email. This email can be fully customized; however, by default, you are looking at something like this:

As depicted in the screenshot above, users must click on the login button (link) within the authentication email. After clicking the link, users will be logged in and see the following message:

Successful Web3 Authentication via Email

By following the instructions in the above pop-up message, users need to return to the original tab. From this point on, it’s up to you to create a dashboard of your choice. As such, you get to decide what logged-in users see. For the sake of this demo, we decided to display users’ account addresses and their balances. Moreover, we’ve also included three buttons: refresh, sign out, and one to perform test transfers:

The purpose of the above screenshot is to show you that this type of Web3 login with email really works. As you can see, we get all the information needed (address and balance) to perform all sorts of Web3 functionalities. For instance, we can easily transfer assets. Moreover, to prove that sending assets is possible, we click on the “Test Transfer” button. A confirmation message confirms our action:

The image above even shows you the MetaMask wallet we’ve sent test assets to. Furthermore, Magic even enables us to avoid dealing with seed words or passwords for a seamless user experience. Hence, for users, things can be as simple as entering an email address and clicking on a confirmation link. 

Why Implement Web3 Authentication via Email?

If you’ve used any Web3 applications, you are most likely familiar with Web3 authentication or Web3 login. You know that it typically requires you to sign a confirmation message using a hot wallet such as MetaMask. While this is a simple process for users that already have wallet extensions set up, it can be a rather overwhelming task for newcomers. Hence, offering your users a method that they are completely familiar with has its advantages. As such, you should consider offering Web3 authentication via email in dApps that are catering to users new to Web3.

How to Do Web3 Authentication via Email – A Step-by-Step Overview

Now that you know how practical Web3 login with email can be for new users, it’s time to see how to implement it. Moreover, if you’ve already created dApps with Moralis in the past, you can easily implement Web3 authentication via email. After following our lead herein, we recommend you dive deeper into Moralis’ documentation. So, here are the steps you need to follow:

  1. Get your Magic API key by visiting the official Magic website. Click on the “Get Started” button and complete the registration procedure:

With your Magic account created, you will get access to your API key.

  1. Next, you need to add the Magic SDK to your project. Depending on your project, you can do this either with the script (when you imported Moralis’ SDK via CDN) or via NPM (when you imported Moralis’ SDK via NPM):
    1. Via CDN: <script src=”https://auth.magic.link/sdk”></script>
    2. Via NPM: npm install magic-sdk
  2. Use the following lines of code:
const user = await Moralis.authenticate({ 
  provider: "magicLink",
  email: "example@email.com",
  apiKey: "pk_xxxxx",
  network: "kovan",
})

Looking at the lines of code above, you can see that it requires a couple of parameters. If you want to use Magic links, “magicLink” is what you need to use next to “provider”. Next to “email”, you need to use the email address of a user that wants to log in. As such, you’ll need to connect this parameter with the email capture field. Next to “apiKey”, you paste your Magic API key. Finally, next to “network”, you get to choose between the mainnet (Ethereum) and one of the Ethereum testnets. 

Web3 Login with Email – An Example Project

Note: To follow along easily, make sure to use the code provided for the sake of this example project. This is the same project as presented in the demo above. It is available on our GitHub page.

As you can see, offering Web3 login with email in your dApps is quite simple when using Moralis. All it takes are the above three steps. Let’s now take on an example project. In case you haven’t done so yet, make sure to complete the first two steps from the previous section. Next, use the “SignIn.js” file, which we’ve created for the sake of this example project. This is where we need to implement the lines from the third step of the previous section:

  const [email, setEmail] = useState("rayyan@moralis.io");

  const handleCustomLogin = async () => {
    await authenticate({
      provider: "magicLink",
      email: email,
      apiKey: "",
      network: "kovan",
    });
  };

Note: Make sure to use your own Magic API key next to “apiKey”.

Moralis’ Web3 Authentication via Email Feature

Those of you who have been creating phenomenal dApps with the help of Moralis before can implement Web3 authentication via email (as instructed above) right away. However, if you are new to Moralis, you first need to complete some basic setup steps. As such, let us guide you through the initial Moralis setup.

Moralis Initial Setup – Part 1 

  1. Create Your Free Moralis Account – Use the link to the left to access the signup page. Then, create your free account by entering your email address and creating your password. Also, make sure to confirm your account (click on the confirmation link sent to your email). However, in case you already have an active Moralis account, just log in.
  2. Create a New Server – Once you’ve successfully logged in to your Moralis admin area, go to the “Servers” tab. There, click on the “+ Create a new Server” button in the top-right corner. From the drop-down menu that appears, select the network type that suits your needs (see the image below). When working on example projects or early stages of your own projects, going with the “Testnet Server” option makes the most sense.

With the server type selected, enter your server’s details in the new pop-up window. You need to give your server a name, then select your region, network, and chain(s):

Finally, you need to spin up your server by clicking on the “Add Instance” button. Please note that it can take some time for the server to start. 

Moralis Initial Setup – Part 2 

  1. Access Server Details – With your Moralis server up and running, most of the Moralis features become available to you. Among others, you get to access your server’s details. For that purpose, you need to click on the “View Details” button next to your server name:


After clicking on “View Details”, a new pop-up window will present you with your server URL, application ID, and more. This is also where you can access the Moralis “sync” feature. Moreover, you get to copy the details in question by using the copy icons:

  1. Initialize Moralis – You now need to initialize Moralis and unleash the full power of its SDK. This includes the ultimate NFT API. So, you need to populate your coding file with your server’s details. When you are building your dApp from scratch, this will be a “.html”, “.jsx”, or “.js” file. However, taking the ultimate shortcut by using the most practical Web3 boilerplate, you’ll be populating the “.env” file. As such, copy and paste your Moralis server’s details (application ID and server URL):
    1. When using the ultimate Web3 boilerplate:

  1. When creating dApps from scratch (“.js” file):

Note: Do NOT use the details from the image above. Instead, make sure to use the details of your server.

Web3 Login with Email and Your dApps

As mentioned in the final step of the initial Moralis setup sequence, you have two options when it comes to creating dApps. Thus, you may use the Moralis Web3 API to build dApps from scratch or use the ultimate Ethereum dApp boilerplate. Each of the two options has its own advantages. For instance, when starting from scratch, you have complete freedom to create a unique UI. Hence, it is the way to go when a unique appearance is your primary goal. 

On the other hand, you can use components with a user-ready UI when working with the boilerplate. As such, the latter enables you to have a dApp with a neat UI up and running in minutes. Thus, the boilerplate offers you the path of least resistance. Moreover, it is the way to go when functionality in the shortest time possible is your prime concern. If that sounds interesting, we recommend checking out our boilerplate projects. 

How to Do Web3 Authentication via Email – Summary

At this point, you are probably really excited. Knowing that there’s a way to onboard users to Web3 applications with them basically not knowing anything about crypto wallets is quite incredible. Furthermore, combine this with the simplicity of creating dApps with Moralis, and you have a decent arsenal on your hands. 

Original article source at https://moralis.io

#web3 #blockchain #javascript #moralis #dapp #email 

Adolphus Tillman

Adolphus Tillman

1644913020

How to Do Web3 Authentication via Email?

Incorporating elements from the Web2 space to the Web3 realm would be highly beneficial. By implementing features that regular users are familiar with, blockchain adoption will come sooner rather than later. One of such features that Web2 users are familiar with is email authentication. However, since blockchain authentication is often limited to Web3 wallets, would it perhaps be possible to achieve Web3 authentication via email? Fortunately, there is a seamless way to do email authentication for Web3. Furthermore, you can quickly implement Web3 login with an email option with the proper tools. By implementing this authentication method into dApps, the general public will be more inclined to adopt Web3, as they’ll be more willing to utilize platforms that use familiar authentication features.

Moving forward, you’ll learn the details about the tools that make Web3 login with email possible. The key to this feature is the ultimate Web3 development platform – Moralis, and its integration of Magic (Magic Labs). Furthermore, we’ll show you a demo of Web3 authentication via email. That way, you’ll see how things function once set in place. In addition, we’ll also take on an example project. As such, we’ll show you how to implement this login method into your dApps (decentralized applications). With that skill under your belt, you will be able to use this user-friendly login option for all your future Web3 apps. Moreover, you will have a chance to enable Web3 login with email for any of your existing dApps built with Moralis. Now, in case this is your first encounter with Moralis (a.k.a. Firebase for crypto), make sure to create your free account before moving on.  

Web3 Authentication via Email

As mentioned above, Moralis’ integration of Magic is a powerhouse when it comes to Web3 login with email. The combination of these two tools enables you to offer users a familiar login method on the frontend. In addition, these tools automatically create a unique Web3 wallet address on the backend. The latter enables users to fully engage in all that Web3 has to offer. Now, the best way to get a full grasp of how Web3 authentication via email functions is to take a look at a demo.

Web3 Login with Email Demo

For the purpose of this demo, we created a pretty simple login page:

As you can see from looking at the image above, our login page has an email address entry field and a login button. You probably agree that most average users would intuitively know to enter their email address and click the button, right?

After clicking the button, the authentication process starts. The latter includes a couple of automated actions. First, a pop-up window is shown to the users:

The message instructs the user to check their email inbox. Hence, the second automated part is sending the user an authentication email. This email can be fully customized; however, by default, you are looking at something like this:

As depicted in the screenshot above, users must click on the login button (link) within the authentication email. After clicking the link, users will be logged in and see the following message:

Successful Web3 Authentication via Email

By following the instructions in the above pop-up message, users need to return to the original tab. From this point on, it’s up to you to create a dashboard of your choice. As such, you get to decide what logged-in users see. For the sake of this demo, we decided to display users’ account addresses and their balances. Moreover, we’ve also included three buttons: refresh, sign out, and one to perform test transfers:

The purpose of the above screenshot is to show you that this type of Web3 login with email really works. As you can see, we get all the information needed (address and balance) to perform all sorts of Web3 functionalities. For instance, we can easily transfer assets. Moreover, to prove that sending assets is possible, we click on the “Test Transfer” button. A confirmation message confirms our action:

The image above even shows you the MetaMask wallet we’ve sent test assets to. Furthermore, Magic even enables us to avoid dealing with seed words or passwords for a seamless user experience. Hence, for users, things can be as simple as entering an email address and clicking on a confirmation link. 

Why Implement Web3 Authentication via Email?

If you’ve used any Web3 applications, you are most likely familiar with Web3 authentication or Web3 login. You know that it typically requires you to sign a confirmation message using a hot wallet such as MetaMask. While this is a simple process for users that already have wallet extensions set up, it can be a rather overwhelming task for newcomers. Hence, offering your users a method that they are completely familiar with has its advantages. As such, you should consider offering Web3 authentication via email in dApps that are catering to users new to Web3.

How to Do Web3 Authentication via Email – A Step-by-Step Overview

Now that you know how practical Web3 login with email can be for new users, it’s time to see how to implement it. Moreover, if you’ve already created dApps with Moralis in the past, you can easily implement Web3 authentication via email. After following our lead herein, we recommend you dive deeper into Moralis’ documentation. So, here are the steps you need to follow:

  1. Get your Magic API key by visiting the official Magic website. Click on the “Get Started” button and complete the registration procedure:

With your Magic account created, you will get access to your API key.

  1. Next, you need to add the Magic SDK to your project. Depending on your project, you can do this either with the script (when you imported Moralis’ SDK via CDN) or via NPM (when you imported Moralis’ SDK via NPM):
    1. Via CDN: <script src=”https://auth.magic.link/sdk”></script>
    2. Via NPM: npm install magic-sdk
  2. Use the following lines of code:
const user = await Moralis.authenticate({ 
  provider: "magicLink",
  email: "example@email.com",
  apiKey: "pk_xxxxx",
  network: "kovan",
})

Looking at the lines of code above, you can see that it requires a couple of parameters. If you want to use Magic links, “magicLink” is what you need to use next to “provider”. Next to “email”, you need to use the email address of a user that wants to log in. As such, you’ll need to connect this parameter with the email capture field. Next to “apiKey”, you paste your Magic API key. Finally, next to “network”, you get to choose between the mainnet (Ethereum) and one of the Ethereum testnets. 

Web3 Login with Email – An Example Project

Note: To follow along easily, make sure to use the code provided for the sake of this example project. This is the same project as presented in the demo above. It is available on our GitHub page.

As you can see, offering Web3 login with email in your dApps is quite simple when using Moralis. All it takes are the above three steps. Let’s now take on an example project. In case you haven’t done so yet, make sure to complete the first two steps from the previous section. Next, use the “SignIn.js” file, which we’ve created for the sake of this example project. This is where we need to implement the lines from the third step of the previous section:

  const [email, setEmail] = useState("rayyan@moralis.io");

  const handleCustomLogin = async () => {
    await authenticate({
      provider: "magicLink",
      email: email,
      apiKey: "",
      network: "kovan",
    });
  };

Note: Make sure to use your own Magic API key next to “apiKey”.

In case you are more of a video person, you can watch over the shoulders of one of Moralis’ experts as he implements the above lines of code. If that interests you, watch the video below, starting at 5:41.

 

Moralis’ Web3 Authentication via Email Feature

Those of you who have been creating phenomenal dApps with the help of Moralis before can implement Web3 authentication via email (as instructed above) right away. However, if you are new to Moralis, you first need to complete some basic setup steps. As such, let us guide you through the initial Moralis setup.

Moralis Initial Setup – Part 1 

  1. Create Your Free Moralis Account – Use the link to the left to access the signup page. Then, create your free account by entering your email address and creating your password. Also, make sure to confirm your account (click on the confirmation link sent to your email). However, in case you already have an active Moralis account, just log in.
  2. Create a New Server – Once you’ve successfully logged in to your Moralis admin area, go to the “Servers” tab. There, click on the “+ Create a new Server” button in the top-right corner. From the drop-down menu that appears, select the network type that suits your needs (see the image below). When working on example projects or early stages of your own projects, going with the “Testnet Server” option makes the most sense.

With the server type selected, enter your server’s details in the new pop-up window. You need to give your server a name, then select your region, network, and chain(s):

Finally, you need to spin up your server by clicking on the “Add Instance” button. Please note that it can take some time for the server to start. 

Moralis Initial Setup – Part 2 

  1. Access Server Details – With your Moralis server up and running, most of the Moralis features become available to you. Among others, you get to access your server’s details. For that purpose, you need to click on the “View Details” button next to your server name:


After clicking on “View Details”, a new pop-up window will present you with your server URL, application ID, and more. This is also where you can access the Moralis “sync” feature. Moreover, you get to copy the details in question by using the copy icons:

  1. Initialize Moralis – You now need to initialize Moralis and unleash the full power of its SDK. This includes the ultimate NFT API. So, you need to populate your coding file with your server’s details. When you are building your dApp from scratch, this will be a “.html”, “.jsx”, or “.js” file. However, taking the ultimate shortcut by using the most practical Web3 boilerplate, you’ll be populating the “.env” file. As such, copy and paste your Moralis server’s details (application ID and server URL):
    1. When using the ultimate Web3 boilerplate:

  1. When creating dApps from scratch (“.js” file):

Note: Do NOT use the details from the image above. Instead, make sure to use the details of your server.

Web3 Login with Email and Your dApps

As mentioned in the final step of the initial Moralis setup sequence, you have two options when it comes to creating dApps. Thus, you may use the Moralis Web3 API to build dApps from scratch or use the ultimate Ethereum dApp boilerplate. Each of the two options has its own advantages. For instance, when starting from scratch, you have complete freedom to create a unique UI. Hence, it is the way to go when a unique appearance is your primary goal. 

On the other hand, you can use components with a user-ready UI when working with the boilerplate. As such, the latter enables you to have a dApp with a neat UI up and running in minutes. Thus, the boilerplate offers you the path of least resistance. Moreover, it is the way to go when functionality in the shortest time possible is your prime concern. If that sounds interesting, we recommend checking out our boilerplate projects. 

How to Do Web3 Authentication via Email – Summary

At this point, you are probably really excited. Knowing that there’s a way to onboard users to Web3 applications with them basically not knowing anything about crypto wallets is quite incredible. Furthermore, combine this with the simplicity of creating dApps with Moralis, and you have a decent arsenal on your hands. 

Link: https://moralis.io/how-to-do-web3-authentication-via-email/

#web3 #authentication