{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/50","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"When we start thinking about authentication in any kind of software (it can be web, mobile, desktop, or even console), the first thing that…","fields":{"slug":"/engineering/password-secure/"},"html":"

When we start thinking about authentication in any kind of software (it can be web, mobile, desktop, or even console), the first thing that comes to mind is username/password, this is an older but still effective technique to protect and identify users. Securing these passwords is not an easy task we require better techniques to secure these passwords from attackers. Generally, passwords stored in databases, so we can secure passwords by traditional techniques to prevent access to databases like firewalls, role definitions, etc. but just to prevent database intrusions is not a fully secured way, we require further password protections by converting them into non-readable (encrypted) formats. To understand encrypting passwords we have to understand plain text passwords and how these kinds of passwords are insecure.

\n

Let's start our journey

\n

Plain text passwords [Never Store Plain text Passwords]

\n

Plain text passwords are stored directly in a database without any encryption. These passwords are very insecure because:\n- If someone hacks your database he can access any account and do anything possible after login.\n- Developers or employees who are working on a project commonly misuse the password and spread these passwords to other people for misuse.

\n

As a hard and fast rule plain text passwords should NOT be accepted in any case or used for any project or product.

\n

Encrypted passwords [Not recommended]:

\n

Encryption helps us by protecting data from hackers. In network communication, the same techniques can be used in saving passwords. Any encryption algorithm can be used to protect passwords. So on registration plain text passwords are encrypted and saved to your database.

\n
```\nEncryptedPassword = Encrypt ( Password, Key);\n```
\n

Get this encrypted password from database then de-crypt and match\nPassword = Decrypt ( EncryptedPasword, Key);

\n

Match with user entered password.

\n

But passwords will still not be fully secured because encrypted data can be always be de-crypted with the encryption key if someone get the key then they can de-crypt your password.

\n

Hashed passwords [Recommended]

\n

Hashing is a method of encryption to get original data from hash. Hashing algorithms are used in network data communications. The encryption encrypts the data but hashing protects tampering with the encrypted data. Hashing algorithms are widely used in securing passwords.

\n

In case of hashing validation of password performed refer to the following pseudo-code:

\n

On registration

\n
PasswordHash = HASH(Password);
\n

Some of the hashing algorithms support salts(a set of characters that is appended to your hash) like HMAC

\n
PasswordHash = HASH(Password, salt);
\n

On login the same process happens, get hash from users entered password

\n
  inputPasswordHash = HASH(inputPassword);
\n

And compare with the saved password

\n
  If(SavedPassworHash == inputPasswordHash){\n\n  //user get login\n\n  }
\n

For making a strong hash from non-salted hash algorithms, salt is appended or prepended to your password string. Appending and prepending also has two kinds of implementations one is a universal salt and the second is per password random salt, let us understand one by one.

\n

Universal salt : in this implementation every password has one salt.

\n\n

In this implementation every password has it's own random salt, but the question is how we preserve salt for a password? Answer is the salt is appended with password by a separator. And on login split that saved string by separator and get hashed password and salt.

\n

On registration when we save password

\n
  Salt = RandomString();\n  PasswordHashWithSalt = Hash(Password+Salt) + ":" + Salt;
\n

On login when compare password : first split salt and password hash

\n
  StringArray = Split(PasswordHashWithSalt , ":" );\n  Salt = StringArray\\[1\\];\n  PasswordHash = StringArray\\[0\\];
\n

Than get hash of user entered password by salt

\n
inputPasswordHash = Hash(inputPassword + Salt);
\n

Then compare both password hash

\n
If(PasswordHash == inputPasswordHash){\n\n//user get login\n\n}
\n

Some popular encryption methods : Most of people use following algorithms for hashing passwords, explaining all algorithms is out of scope of this blog. I am adding reference URLs for more reading. I am adding only strong hashing algorithms

\n
    \n
  1. PBKDF2
    2. \n
  2. bcrypt
    3. \n
  3. scrypt
    4. \n
  4. Argon2
    5. \n
\n

Hash cracking techniques

\n

Brute force: It is the most popular password cracking technique, in this loop every combination of numbers and alphabets are tried. Suppose one system have password minimum length is 6 digits then

\n

000000, 000001,000002……………….111111,111112……..AAAAAA etc.

\n

In any case user have set simple password like 123123, it will be cracked simply. How to prevent this kind of scenarios

\n
    \n
  1. Enforce to user to use at-least one number, one symbols, one capital letter and one small letter in password.
    2. \n
  2. On login form if someone entered more than three time wrong password for one username then ask for human verification by captcha, it will be prevented by automatic brute force password generator.
    3. \n
\n

Dictionary attacks:

\n

In crypt-analysis and computer security, a dictionary attack is a technique for defeating a cipher or authentication mechanism by trying to determine its decryption key or pass-phrase by trying hundreds or sometimes millions of likely possibilities, such as words in a dictionary. (Wikipedia)

\n

it is just extended version of brute force attack, in this attacker attack by dictionary words, most of time people set their password as meaningful name to keep easily in mind. And in this attack.

\n

Rainbow tables

\n

A rainbow table is a precomputed table for reversing cryptographic hash functions, usually for cracking password hashes. Tables are usually used in recovering a plain text password up to a certain length consisting of a limited set of characters. It is a practical example of a space/time trade-off, using less computer processing time and more storage than a brute-force attack which calculates a hash on every attempt, but more processing time and less storage than a simple look-up table with one entry per hash. Use of a key derivation function that employs a salt makes this attack unfeasible. (Wikipedia)

\n

Migrating Hashing algorithm

\n

Sometimes people realize that their Hashing algorithm is weak so they think to migrate system to one algorithm to another but hashing algorithms are one way so getting original password is not possible so the question becomes how to make this possible. There are two ways to do this.

\n

Reset all passwords: In this approach just migrate your algorithm from one to another but keep password hash same, but password will not be matched because hash of one algorithm doesn't match with hash of another algorithm, so email to user about it that our system has improved security system and send link with this email for resetting password, so user will reset password.

\n

Migrate on login: this approach is tricky in this case maintain one parameter for checking is password upgraded to new algorithm, set false for all user by default and when use come for login check this check if it is false then compare password with old algorithm and if password get matched then start user's session and get newer hash from plain text password and saved to database and update is password upgraded check to true. Now from next time user's password will be checked by newer algorithm.

\n","frontmatter":{"date":"May 14, 2015","updated_date":null,"description":null,"title":"Password Security","tags":["Security","Password"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/e7bb89604f85c7699b36ea7c43eab30e/7d145/password-security.png","srcSet":"/static/e7bb89604f85c7699b36ea7c43eab30e/69585/password-security.png 200w,\n/static/e7bb89604f85c7699b36ea7c43eab30e/497c6/password-security.png 400w,\n/static/e7bb89604f85c7699b36ea7c43eab30e/7d145/password-security.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy…","fields":{"slug":"/engineering/create-a-loading-spinner-using-css/"},"html":"

Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy resolution. What if you can create a gif(ish) element out of CSS? Because you can.

\n

CSS has come a long way we can now create our own GIF-ish contents and the best part, we have full control over it.

\n

\n \n \n

\n

Great, how do I do it?

\n

First things first, we need our html structure that will hold all the things we need. There's the container:

\n
<div class="container"> <!--There's the container that centers it-->\n    <div class="spinner-frame"> <!--The background-->\n        <div class="spinner-cover"></div> <!--The Foreground-->\n        <div class="spinner-bar"></div> <!--and The Spinny thing-->\n    </div>\n</div>
\n

Easy, right? Now we need to add them styles to our html's.

\n
.container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    text-align: center;\n    background: #eee;\n}\n.container:before {\n    content: "";\n    height: 100%;\n    display: inline-block;\n    vertical-align: middle;\n}
\n

Since, it's a spinner and normally covers the whole page. The combination of \"position: fixed\" and bottom, top, left, right as 0 will do that for you. ( We don't want the users to click everywhere, right?).

\n

The :before pseudo element will help you center the spinner correctly (without the help of negative margins). How? If you look at the container class, it has a \"text-align: center\" which aligns inline elements like the pseudo element :before. But, we need to add height on that thing and inline elements do not like that. So, we need to change the display from inline to inline-block and add \"vertical-align: middle\" so it aligns vertically.

\n

Now the for the fun stuff.

\n

We need to style the spinner frame.

\n
.container .spinner-frame {\n    display: inline-block;\n    vertical-align: middle;\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n    border: 5px solid #fff;\n    padding: 10px;\n}
\n

A couple of things here. Since it's a DIV, by default it's a block element. We need to change that to an inline-block so it accepts the text-align and centers itself with the :before pseudo element. Then add a \"vertical-align: middle\" and viola!! Centered!

\n

A spinner won't be a spinner if it's not a circle. A 50% border-radius will work properly if you have a perfect 1:1 ratio. Now we need to push everything inside (and automatically center it), adding consistent padding will do that for you.

\n

Now for the foreground or spinner-cover.

\n
.container .spinner-frame .spinner-cover {\n    background: #fff;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    z-index: 2;\n}
\n

This will add a white cover on top of the spinner and hide everything that we don't need inside it. You know what they say... If you can't remove it, hide it.

\n

For the spinny thing:

\n
.container .spinner-frame .spinner-bar {\n    background: #29d;\n    width: 50%;\n    height: 50%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 100% 0 0 0;\n    -webkit-animation: spinny 2s linear infinite;\n    transform-origin: 100% 100%;\n}\n@-webkit-keyframes spinny {\n    0% {\n        transform: rotate(0deg);\n        background: #29d;\n    }\n    50% {\n        transform: rotate(180deg);\n        background: #00427c;\n    }\n    100% {\n        transform: rotate(360deg);\n        background: #29d;\n    }\n}
\n

This one needs more advance CSS in it because this is the only thing that moves.

\n

We need to tell the element that the center point is not on the center of the element but on the bottom right edge where it spins. The CSS \"transform-origin: 100% 100%\" will do that easily for you.

\n

Since it's an animated element, overflow hidden (for some reason) doesn't work on this guy. So, we need to curve to top left part of it. The CSS \"border-radius: 100% 0 0 0\" will do that for you.

\n

We also need to push it on the top left where it starts spinning \"position: absolute\" with top and left 0 will push it there.

\n

Now we need to animate it using key-frames. From 0% to 100% the \"transform: rotate()\" from 0 degrees (0deg) to 360 degrees (360deg) will rotate it forever. FOREVER!

\n

A tutorial wouldn't be complete without a demo.

\n

See the Pen azVwqj by Darryl Tec (@notdarryltec) on CodePen.

\n","frontmatter":{"date":"May 05, 2015","updated_date":null,"description":"Learn how to create a loading spinner using CSS","title":"Loading spinner using CSS","tags":["CSS","Loader"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8b9b7fd9f1449699b8c7a09b270a185c/7d145/css3-loading-spinner.png","srcSet":"/static/8b9b7fd9f1449699b8c7a09b270a185c/69585/css3-loading-spinner.png 200w,\n/static/8b9b7fd9f1449699b8c7a09b270a185c/497c6/css3-loading-spinner.png 400w,\n/static/8b9b7fd9f1449699b8c7a09b270a185c/7d145/css3-loading-spinner.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get…","fields":{"slug":"/engineering/relational-database-management-system-rdbms-vs-nosql/"},"html":"

Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get very confused with all the choice. They do not understand why they should consider a newer, alternative database when RDBMSs have been around for 25+ years. However, many big enterprises are already using alternative databases and are saving money, innovating more quickly, and completing projects.

\n

Relational Database Management System (RDBMS)

\n

RDBMS Database is a relational database. It is the standard language for relational database management systems.Data is stored in the form of rows and columns in RDBMS. The relations among tables are also stored in the form of the table SQL (Structured query Language) is a programming language used to perform tasks such as update data on a database, or to retrieve data from a database. Some common relational database management systems that use SQL are: Oracle, Sybase, Microsoft SQL Server, Access, etc.

\n

Features Of RDBMS

\n
    \n
  1. SQL databases are table based databases
    2. \n
  2. Data store in rows and columns
    3. \n
  3. Each row contains a unique instance of data for the categories defined by the columns.
    4. \n
  4. Provide facility primary key, to uniquely identify the rows
    5. \n
\n

Limitations for SQL database

\n

Scalability: Users have to scale relational database on powerful servers that are expensive and difficult to handle. To scale relational database it has to be distributed on to multiple servers. Handling tables across different servers is difficult .

\n

Complexity: In SQL server’s data has to fit into tables anyhow. If your data doesn’t fit into tables, then you need to design your database structure that will be complex and again difficult to handle.

\n

NoSQL

\n

NoSQL commonly referred to as “Not Only SQL”. With NoSQL, unstructured ,schema less data can be stored in multiple collections and nodes and it does not require fixed table sachems, it supports limited join queries , and we scale it horizontally.

\n

Benefits of NoSQL

\n

highly and easily scalable

\n

Relational database or RDBMS databases are vertically Scalable When load increase on RDBMS database then we scale database by increasing server hardware power ,need to by expensive and bigger servers and NoSQL databases are designed to expand horizontally and in Horizontal scaling means that you scale by adding more machines into your pool of resources.

\n

Maintaining NoSQL Servers is Less Expensive

\n

Maintaining high-end RDBMS systems is expensive and need trained manpower for database management but NoSQL databases require less management. it support many Features like automatic repair, easier data distribution, and simpler data models make administration and tuning requirements lesser in NoSQL.

\n

Lesser Server Cost and open-Source

\n

NoSQL databases are cheap and open source. NoSql database implementation is easy and typically uses cheap servers to manage the exploding data and transaction while RDBMS databases are expensive and it uses big servers and storage systems. So the storing and processing data cost per gigabyte in the case of NoSQL can be many times lesser than the cost of RDBMS.

\n

No Schema or Fixed Data model

\n

NoSQL database is schema less so Data can be inserted in a NoSQL database without any predefined schema. So the format or data model can be changed any time, without application disruption.and change management is a big headache in SQL.

\n

Support Integrated Caching

\n

NoSQL database support caching in system memory so it increase data output performance and SQL database where this has to be done using separate infrastructure.

\n

Limitations & disadvantage of NoSQL

\n
    \n
  1. NoSQL database is Open Source and Open Source at its greatest strength but at the same time its greatest weakness because there are not many defined standards for NoSQL databases, so no two NoSQL databases are equal
    2. \n
  2. No Stored Procedures in mongodb (NoSql database).
    3. \n
  3. GUI mode tools to access the database is not flexibly available in market
    4. \n
  4. too difficult for finding nosql experts because it is latest technology and NoSQL developer are in learning mode
    5. \n
\n

Conclusion

\n

RDBMS and NoSQL both dbs are great in data management and both are used to keep data storage and retrieval optimized and smooth. It’s hard to say which technology is better so developer take decision according requirement and situations

\n","frontmatter":{"date":"April 28, 2015","updated_date":null,"description":"Learn about RDBMS and NoSQL Database systems, their differences, benefits and limitations","title":"RDBMS vs NoSQL","tags":["Database"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/27a4b3387143bba7cab9a1b54834454d/7d145/rdbms-vs-nosql.png","srcSet":"/static/27a4b3387143bba7cab9a1b54834454d/69585/rdbms-vs-nosql.png 200w,\n/static/27a4b3387143bba7cab9a1b54834454d/497c6/rdbms-vs-nosql.png 400w,\n/static/27a4b3387143bba7cab9a1b54834454d/7d145/rdbms-vs-nosql.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"With Information Technology becoming more and more Cloud based nowadays (due to industry demanding reliability and scalability in their…","fields":{"slug":"/engineering/cloud-storage-vs-traditional-storage/"},"html":"

With Information Technology becoming more and more Cloud based nowadays (due to industry demanding reliability and scalability in their infrastructure), the Cloud storage system has become a very feasible solution. Various organizations are migrating their data to cloud storage, due to a few simple reasons. They want data to be easily accessible, cost effective and reliable.

\n

**How is Cloud storage better than any traditional  data storage**

\n\n

**Use Case**

\n

LoginRadius identity storage provides the above solution, LoginRadius is managing its infrastructure on the cloud and has never experienced data breaches or down-times. Infrastructure that makes sure you retain certain vital attributes in the storage is critical, this necessitates your user's identities being stored in an extremely reliable system such as is implemented with LoginRadius identity storage. Utilizing some extremely robust cloud storage providers(Microsoft Azure) LoginRadius offers top of the line availability and reliability of user data.

\n","frontmatter":{"date":"April 21, 2015","updated_date":null,"description":null,"title":"Cloud storage vs Traditional storage","tags":["Cloud","Storage"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/1af61cfd21d04083f6850cef32d95d7f/7d145/cloud-vs-traditional-storage-1.png","srcSet":"/static/1af61cfd21d04083f6850cef32d95d7f/69585/cloud-vs-traditional-storage-1.png 200w,\n/static/1af61cfd21d04083f6850cef32d95d7f/497c6/cloud-vs-traditional-storage-1.png 400w,\n/static/1af61cfd21d04083f6850cef32d95d7f/7d145/cloud-vs-traditional-storage-1.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and…","fields":{"slug":"/engineering/getting-started-phonegap/"},"html":"

PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and quickly generate out various mobile compatible apps. This prevents your developers from having to learn and understand multiple platform specific languages and instead use the PhoneGap framework which is based in HTML to create the app and then generate it into any one of the following platforms:

\n
    \n
  1. iOS
    2. \n
  2. Android
    3. \n
  3. Windows Phone
    4. \n
  4. Windows
    5. \n
  5. Firefox OS
    6. \n
  6. Amazon Fire OS
    7. \n
  7. Blackberry
    8. \n
\n

With time saved on learning development languages for the above platforms your team can focus on the features of your app.

\n

Setting up your Environment

\n
    \n
  1. Download and install node.js, This will be used to install the Cordova/PhoneGap framework.
    2. \n
  2. Download and install a Git Client, This is used by the Cordova/PhoneGap framework when creating projects.
    3. \n
  3. Open command prompt and verify that both of the above systems have been installed by running npm and git.
    4. \n
  4. Install the Cordova/PhoneGap system by running the following command in your command prompt (Note: this may take a few minutes)
    5. \n
\n
C:\\>npm install -g cordova
\n

Verify your installation of Cordova/PhoneGap by running cordova in command prompt. This should display a list of the available Cordova commands.

\n

Setting up your Project

\n
    \n
  1. Create a directory which will contain your PhoneGap/Cordova project code.
    2. \n
  2. Open the created directory in command line and create a project with the command cordova create < sitename >
    3. \n
\n
C:\\>rootdir\\cordova create FirstSite
\n
    \n
  1. \n

    This will create a project in the root folder with the specified site-name. This project will contain:

    \n
      \n
    1. \"hooks\" directory- Contains special scripts that can be used to customize Cordova commands.
      2. \n
    2. \"platforms\" directory- This contains the app specific projects that you will include below.
      3. \n
    3. \"plugins\" directory- Contains add-on code for interfacing with native features. You can create your own custom interface or use one of pre-compiled plugins.
      4. \n
    4. \"www\" directory- Contains the PhoneGap/Cordova structure and some standard js and css files.
      5. \n
    5. config.xml file- This file contains meta data for controlling common features of your apps like the app title, description and author.
      6. \n
    \n
    2. \n
  2. \n

    Add platforms to the project with the cordova platform add command. Note: adding platforms requires that the relevant dependencies are installed in your system for example adding android requires that you have installed the Android SDK. Available platforms for a windows environment are:

    \n\n

    And for Mac:

    \n\n
    C:\\>rootdir\\cordova platform add android
    \n
    3. \n
  3. \n

     You can now get a list of the added platforms by running the following command:

    \n
    C:\\>rootdir\\cordova platform ls
    \n
    4. \n
  4. \n

    You can remove a specific platform from the list with the following command:

    \n
    C:\\>rootdir\\cordova platform remove android
    \n
    5. \n
  5. Once you have added in the desired platforms build the platform specific apps by running the following command:
    6. \n
\n

Note: Building platforms requires that the relevant dependencies are installed in your system for example building android requires that you have installed the Android SDK

\n
C:\\>rootdir\\cordova build
\n
    \n
  1. You can use these built projects found in the \"platforms\" directory in platform specific IDEs or emulate the projects directly with the following command:
    2. \n
\n
C:\\>rootdir\\cordova emulate android
\n

At this point you have a basic PhoneGap project configured and your desired platforms added and you can get started with adding or building out additional features and content in the \"www\" directory and run the command in step 7 above to create the platform specific projects. You can find detailed instructions on setting up additional features and implementing PhoneGap on the PhoneGap site.

\n","frontmatter":{"date":"March 31, 2015","updated_date":null,"description":null,"title":"Getting Started with Phonegap","tags":["Engineering","PhoneGap","Mobile"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d8c820456aa3a57aa0a36aab4d27f8fc/40725/dev-sprites2.png","srcSet":"/static/d8c820456aa3a57aa0a36aab4d27f8fc/69585/dev-sprites2.png 200w,\n/static/d8c820456aa3a57aa0a36aab4d27f8fc/497c6/dev-sprites2.png 400w,\n/static/d8c820456aa3a57aa0a36aab4d27f8fc/40725/dev-sprites2.png 580w","sizes":"(max-width: 580px) 100vw, 580px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a  popup by Zoie Carnegie. If not, you…","fields":{"slug":"/engineering/animating-simple-css-popup-tutorial/"},"html":"

By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a  popup by Zoie Carnegie. If not, you can click this link to go and follow that tutorial. Cool?

\n

Once you’re done creating your css popup. We’re now going to animate it with CSS3. Why? because we’re tired of seeing things that just pop onto users screen and you don’t know where it came from. Also, to make it fun for your users. Let's get started.

\n

First things first. CSS3 animations don't work on \"display: none\" or \"block\". So, we need to modify Zoie's code to not do that and just simply add and remove the relevant class.

\n
// Close Popup Event\nclosePopup.onclick = function() {\n    overlay.className = ''; /*This removes all classes, use at your own risk*/\n    popup.className = ''; /*This removes all classes, use at your own risk*/\n};\n// Show Overlay and Popup\nbutton.onclick = function() {\n    overlay.className = 'show';\n    popup.className = 'show';\n}
\n

We need to modify the CSS too.

\n
#popup {\n  visibility: hidden;\n  opacity: 0;\n  z-index: -1; /*hide it in the back of the page*/\n}\n#overlay {\n  visibility: hidden;\n  opacity: 0;\n  z-index: -1; /*hide it in the back of the page*/\n}
\n

Now, why did I do that? Since, we can't use display: none, we need to find a way to hide it differently. CSS3 animation works perfectly with \"visibility: hidden\", \"opacity\" and \"z-index\". I know it's a bit more CSS but, I assure you that it's worth it.

\n

Slide Down

\n

Let's start with a simple one. Sliding them pops, yo!

\n
/*Add defaults*/\n#popup {\n  top: -50%; /*Put it on the very top*/\n  transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n   top: 50%; /*slide it down smoothly*/\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

The \"top: -50%\" will push our pop-up outside while \"top: 50%\" will bring it back to the center. Now, combine it with a CSS transition and it will gracefully slide down along with the fading effect of opacity. Pretty neat huh? How about making it pop up from the center of the page? I mean it's called \"pop-up\" for a reason right?

\n

We can achieve that effect by using the same code we made earlier. Just change the \"top: -50%\" to \"transform: scale(0)\". This will scale our beloved pop-up to a small size. The showing it part will have to change too. Same as the default, change the \"top: 50%\" to \"transform: scale(1)\". This will then scale it back to original size.

\n
/*Add defaults*/\n#popup {\n  transform: scale(0) /*scale it to a smaller size*/\n  transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n  transform: scale(1) /*scale it to a default size*/\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Want to try something different than that? I got your back.

\n

Swirly Pop

\n

Have you heard of CSS keyframes? We're going to use that to achieve what we want. I just want to say first that CSS keyframes do not work on older browsers like IE8 and IE9. Use this trick at your own risk.

\n

The keyframes code looks like this

\n
@keyframes pop-swirl {\n  0% {\n    transform: scale(0) rotate(360deg);\n  }\n  60% {\n    transform: scale(0.8) rotate(-10deg);\n  }\n  100% {\n    transform: scale(1) rotate(0deg);\n  }\n}
\n

The word \"pop-swirl\" is the variable we need to call later on to trigger that animation or keyframe. You can name this to whatever you want, there are no restrictions. The animation works by specifying your start and end points. There's 2 ways you can do that, either by using \"from\" and \"to\" or \"0%\" to \"100%\". I prefer the 2nd way because you can add like 100 keyframes to it.

\n

Calling that code will need the help of an \"animation\" tag. This is like a transition but more advanced. I also like to point out that right now, It's not fully supported yet but you can still use it by appending your vendor prefix like \"-webkit-\". Like this...

\n
\\-webkit-animation: pop-swirl 1s ease forwards;
\n

Let's break this down

\n

-webkit- = Vendor prefix.
\nanimation = Used to call the keyframes.
\npop-swirl = The variable we used on keyframes.
\n1s = Duration of animation.
\nease = Timing function. This can also make the animation smoother.
\nforwards = This is the animation play state.

\n

Using the same method as Slide Down and Pop In. We just need to remove top or transform tags and add the animation tag in it.

\n
/*Don't need the defaults*/\n/*Now show it*/\n#popup.show {\n  -webkit-animation: pop-swirl 1s ease forwards; /*trigger the keyframe*/\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Bonus!

\n

The Anvil Effect

\n

Let's shock your screen with this heavy pop-up. You can achieve the anvil effect by using this code.

\n
@keyframes anvil {\n  0% {\n    transform: scale(5) rotate(0);\n    opacity: 0;\n    box-shadow: 0 0 0 rgba(241, 241, 241, 0);\n  }\n  50% {\n    transform: scale(1) rotate(-0.2deg);\n    opacity: 1;\n    box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);\n  }\n  75% {\n    transform: scale(1) rotate(0.2deg);\n    opacity: 1;\n    box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);\n  }\n  100% {\n    transform: scale(1) rotate(0);\n    opacity: 1;\n    box-shadow: 0 0 500px rgba(241, 241, 241, 0);\n  }\n}\n#popup[data-pop="anvil"].show {\n  -webkit-animation: anvil 1s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n}\n#popup[data-pop="anvil"].show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Of course a tutorial won't be complete without a demo.

\n

Slide Down Demo Pop In Demo Pop Swirl Demo Anvil Demo

\n

And there you have it. A little something to spice up your pop-up game. I hope this helps you woo your users and entertain them. Until next time. Cheers.

\n","frontmatter":{"date":"March 23, 2015","updated_date":null,"description":"Learn how to animate the modal popup using CSS keyframe","title":"Animate the modal popup using CSS","tags":["Slide","CSS","Swirl","PopUp"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/0e6aaee6701ea5637112edaa0ee392df/2a4de/simplepop.png","srcSet":"/static/0e6aaee6701ea5637112edaa0ee392df/69585/simplepop.png 200w,\n/static/0e6aaee6701ea5637112edaa0ee392df/497c6/simplepop.png 400w,\n/static/0e6aaee6701ea5637112edaa0ee392df/2a4de/simplepop.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"

Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.

\n

What does it mean for user authentication?

\n

On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).

\n

On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.

\n

In this article, we’ll discuss:

\n\n

How is User Authentication Affected?

\n

Third-party cookie restrictions affect user authentication in three ways, as follows.

\n

External Identity Providers

\n

If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.

\n

Web SSO

\n

If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.

\n

If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.

\n

For example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.

\n

Federated SSO

\n

Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.

\n

Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.

\n

For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.

\n
\n

Note: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).

\n
\n

Chrome’s Alternatives for Third-Party Cookies

\n

Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.

\n

Specific to authentication, Google recommends the following:

\n
    \n
  1. Cookies Having Independent Partitioned State (CHIPS)
    2. \n
  2. Storage Access API
    3. \n
  3. Related Website Sets
    4. \n
  4. Federated Credential Management (FedCM) API
    5. \n
\n

Cookies Having Independent Partitioned State (CHIPS)

\n

CHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.

\n

For example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.

\n

If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.

\n

You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.

\n

If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.

\n

However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.

\n

Storage Access API

\n

With Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.

\n

Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.

\n

It is most suitable when loading cross-site resources and interactions, such as:

\n

Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.

\n

As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.

\n

Related Website Sets

\n

With Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.

\n

Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets

\n

It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.

\n

It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.

\n

The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.

\n

If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.

\n

Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.

\n

Federated Credential Management (FedCM) API

\n

FedCM API enables federated SSO without third-party cookies.

\n

With FedCM API, a user follows these steps for authentication:

\n
    \n
  1. The User navigates to a Service Provider (SP) — aka., Relying Party (RP)
    2. \n
  2. As the user requests to authenticate, the SP requests the browser through FedCM API to initiate authentication.
    3. \n
  3. The browser displays a list of available identity providers (supported by the RP), such as social IdPs like Google, Apple, LinkedIn, and Facebook, or other OAuth IdPs like LoginRadius.
    4. \n
  4. Once the user selects an IdP, the browser communicates with the IdP. Upon valid authentication, the IdP generates a secure token.\nThe browser delivers this secure token to the RP to facilitate user authorization.
    5. \n
\n

You can access a user demo of FedCM here: FedCM.

\n

For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.

\n\n

Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.

\n

We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.

\n

Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.

\n

In Conclusion

\n

The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.

\n

Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.

\n

From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.

\n

Glossary

\n

Top-level site: It is the primary site a user has visited.

\n

First-party cookie: A cookie set by the top-level site.

\n

Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.

\n

References

\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":294,"currentPage":50,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}