![\"fun\"](\"https://media2.giphy.com/media/3oEjHKiDeYrKnjwGFq/giphy.gif\")
Hacktoberfest 2021 is the 8th edition of Hacktoberfest hosted by DigitalOcean. It is an open source festival celebrated during October every year, encouraging people worldwide to actively participate and contribute to participating open source projects hosted across GitHub and GitLab.
\nIn fact, Hacktoberfest 2020 had attracted 169,886 participants and 116,361 participating open source repositories, representing 135 countries.
\nYou can simply register yourself here and start contributing to any participating open source project from Oct 01 - Oct 31. And if you meet the contribution criteria set by DigitalOcean, you’ll receive a Hacktoberfest t-shirt from DigitalOcean!
\nAdditionally, if you make successful contributions to LoginRadius open source projects, you’ll separately receive a LoginRadius branded Hacktoberfest t-shirt from us, recognizing and thanking you for your valuable contributions.
\nLoginRadius is an industry-leading Customer Identity and Access Management (CIAM) provider with a mission to secure every identity on this planet.
\nAt LoginRadius, we’re committed to making our cloud platform more accessible for developers across tech stacks, so they can quickly implement user registration and authentication processes in their applications and become more efficient at focusing on core business features.
\nWe’ve always loved open source and the many great things it has done for the software development community and businesses. This inspired us to open source many of our projects, including SDKs, LR CLI, and Async Blog, a leading publication for developers by developers.
\nThrough our open source projects, we actively collaborate with the developer community and drive change and innovation for the optimistic progress of everyone.
\nWhen you contribute to our open source projects, you’re helping the whole developer community become efficient, productive, and helping them manage user identities and authentication on their applications securely and scalably.
\nThe exciting part about being involved in the open source community is that no matter how small or big your contributions are, the community will welcome your efforts and collaborate with you positively, sharing feedback and expressing gratitude.
\nEspecially with LoginRadius open source projects, your contributions can make a big difference! We also try making your collaboration with us more enjoyable.
\nPlease note that only contributions that add significant value to our projects will be eligible for swag. This will be at our sole discretion. But you may go ahead and contribute in any way you would like.
\nYou should have a basic to intermediate understanding of the following:
\nEach of the following public repositories on GitHub will have a list of issues listed. You can choose to work on these issues based on your skills and expertise in solving them.
\nAt LoginRadius, we value your contributions and proactively collaborate with you to get your contribution accepted.
\nBut one thing to keep in mind is that we don’t tolerate spamming.
\nSo, what is spamming?
\nSpamming is creating a pull request for the sake of it and not adding value in any way. We’ll identify spam pull requests and report them according to GitHub guidelines.
\nAnyways, you don’t have to worry about spamming accidentally: it seldom occurs without a clear intention. If we identify something as spam, we’ll let you know and help you understand why it is marked as spam.
\nYou can also easily find issues with the hacktoberfest label in order to know which repositories are seeking contributions. Or, you can simply click here to find all the issues needing contribution.
\nThat all being out of the way, here are the open source projects for which we’re seeking your valuable contributions:
\nLoginRadius CLI: We understand that developers love the simplicity and efficiency offered by CLI. So, we recently launched CLI for LoginRadius, which helps implement and manage LoginRadius CIAM faster than ever.
\nAs our CLI still has room for becoming great, we seek your contributions in any way possible to make it better and help developers become more productive.
\nAsync Blog: This is our open source blog created for developers by developers. If you’ve expertise in solving issues and fixing errors, please come forward and share your expertise with the world.
\nWe have a few issues created for this repository based on our research about what problems developers are currently facing and trying to solve them. Share your expertise, write a blog, and be a holding hand for developers in need!
\nPlease note that each project will have specific guidelines on how to contribute in general and raise pull requests. Also, each project will have issues listed that you can pick and work on.
\nIf you’re facing any issues with locally running a project or something else, please feel free to raise an issue for the project. Our team will help you out.
\nBy actively participating in Hacktoberfest, you make the open source community more sustainable, and, in turn, this makes you feel at home. Empowering one another is what best depicts the open source philosophy and is a reward in itself.
\nHowever, we want to make it more fun by sending cool t-shirts to all the accepted/eligible contributors. Just make sure to fill this form after you raise a pull request.
\nDon’t forget that your contributions to our projects also count towards your overall Hacktoberfest contributions calculated by DigitalOcean — and if you’re eligible, they’ll send you another t-shirt as well.
\nLet’s have fun with Hacktoberfest 2021!
\n
You should know the basics of Vim beforehand. You may refer to a previous blog Vim: Getting started.
\nThis tutorial explores the following concepts:
\nIn addition, this tutorial explores a few other tips and tricks. It is not uncommon for folks who have been using Vim for a long time and not being familiar with these handy, useful features.
\nYou don't want to miss out on macros if you want to level up your Vim game. Vim macro is a powerful feature that allows you to record a sequence of keys on the fly. It helps you to automate a lot of stuff.
\nMacros are based on the concept of registers. If you don't know what registers are, you can think of them as a bunch of spaces in memory that Vim uses to store some text.
\nMacros are editable registers, which you can record, store, and edit whenever you want.
\nHere's the basic syntax of macros:
\nq<key you want to record your macro into><series of commands>qExample:
\nq1f;xqLet's break it down for you:
\nq : Starts recording a macro
\n1 : The recorded macro will be stored on key 1
\nf;x : Find the first occurrence of ;in that line and delete ;
\nq : stop recording the macro
That's it. Now, you can use this macro by @<your key> i.e @1
If you want to repeat a macro n number of times, then n@1is the syntax.
Not impressed yet? Huhh! Let's show you a practical use case to demonstrate the power of a macro. I work in ReactJs a lot and like to export all my components in one file. Let's try exporting 99 HeroBlocks in one go.
\nThe desired result is:
\nexport {default as HeroBlock1 } from './HeroBlock1/HeroBlock1.js'\nexport {default as HeroBlock2 } from './HeroBlock1/HeroBlock2.js'\nexport {default as HeroBlock3 } from './HeroBlock1/HeroBlock3.js'\n...\n..\nso onPerform vim index.js
And, write this line:
\nexport {default as HeroBlock1 } from './HeroBlock1/HeroBlock1.js'
Now, follow along:
\nq1yyp4E ^A6e ^Aq
Breaking it down:
\nq1 : Start recording a macro in key 1.
\nyy : yank the current line.
\np : paste the yanked line.
\n4E : Get the cursor to 1 of Heroblock1. (f1 might be tempting but it will give you wrong results as not all lines will have 1, they can have any number. Try making the macro very generalized.)
\n^A : this is ctrl + a. It increments the current version by one.
\n6e : Get the cursor to the second number.
\n^A : increment the number by one.
\nq : stop recording.
Now, to repeat your macro 99 times:
\n99@1
And that's all.
\nIn simple terms, a buffer is a file that has been loaded into memory. Everything you do in Vim is in a buffer. You can list all the buffers by :buffers. And then, if you want to check out a particular buffer, use :b n -- where n is the buffer number.
If you want to delete a buffer, use :bd n is the command.
To create a new buffer in the same view -- creating a split in the current window -- use :sp filename.
For a vertical split, use :vsp filename.
\n\nTo be honest, using buffer numbers to switch buffers is not what I prefer to do. I prefer to switch based on what I see, like
\nctrl-wthenjto focus on a buffer below if I'm splitting the window.:tabpreviousto move a tab on the left if I'm using tabs.
Here are some key bindings you might want to use for a smooth workflow.
\nnnoremap <C-t> :tabnew<CR>\nnnoremap <C-Left> :tabprevious<CR>\nnnoremap <C-Right> :tabnext<CR>\nnnoremap <C-J> <C-W><C-J>\nnnoremap <C-K> <C-W><C-K>\nnnoremap <C-L> <C-W><C-L>\nnnoremap <C-H> <C-W><C-H>The global command in Vim is very powerful and will solve a lot of your problems quickly.
\nThe basic syntax goes something as follows:
\n:[range]global/{pattern}/{command}Let's go through some use cases to learn more about it.
\nThe following will delete any line containing the word console in the entire file:
\n:g/console/dThe following will delete any line between line 10-20 containing the word console in it:
\n:10,20g/console/dYou can even do the inverse of it by using :g!
The following will delete any line not containing the word console in it in the entire file:
\n:g!/console/dYou can even combine the two.
\nThe following will delete any line containing console and not containing hello in it in the entire file.
\nThe global command can work on any regular expression, which makes it even more powerful, provided you're creative enough...
\n:g/console/g!/Hello/dThe following will delete any line starting with # i.e., comments in python will be deleted in one go:
:g/^#/dSo far, we've been using d as the command, but it can be anything else like m for move t for copy etc.
One of the very powerful commands is norm. This command allows you to do anything that would have worked in normal mode.
The following will comment out all the print statements in a python code in one go.
\n:g/print/norm I#The global command can be coupled with macros using norm, which means you can apply a macro to certain lines matching the regex given. This was enough to blow my mind, and it made the time I spent reading about Vim worthy.
\nHere's the syntax for using macros with global commands:
\n:g/const/normal @qCongratulations! You made it this far. You now have leveled up your Vim game. All these tips and tricks will eventually be useful to you. Here's a little something for reading this far: Pintovim You can use this tool to make your own customized Vim color scheme.
\nThanks for reading!
\n","frontmatter":{"date":"September 23, 2021","updated_date":null,"description":"Vim is Vi's newest and most common reincarnation, which is supported on every known platform. Go through this tutorial to learn about what Vim is and how to make the most out of it.","title":"How to Upgrade Your Vim Skills","tags":["Vim","Text Editor","UNIX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/0e8a15779baa24ee0c8d1487ce2f4794/ee604/Vim.png","srcSet":"/static/0e8a15779baa24ee0c8d1487ce2f4794/69585/Vim.png 200w,\n/static/0e8a15779baa24ee0c8d1487ce2f4794/497c6/Vim.png 400w,\n/static/0e8a15779baa24ee0c8d1487ce2f4794/ee604/Vim.png 800w,\n/static/0e8a15779baa24ee0c8d1487ce2f4794/f3583/Vim.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Shubhankar Khare","github":"iamshubhankarkhare","avatar":null}}}},{"node":{"excerpt":"In modern websites that serve different kinds of users, there is a need to create a distinction between users to determine what kind of…","fields":{"slug":"/engineering/guest-post/role-based-user-authentication-with-loginradius-and-reactjs/"},"html":"In modern websites that serve different kinds of users, there is a need to create a distinction between users to determine what kind of privileges are assigned to them. You can achieve this with authentication. Through authentication, we validate user-specific credentials to determine if the user is genuine and then assign a specific role, which could be a simple client or administrator access, for example.
\nReact user authentication is usually carried out by using a trusted third-party customer identity and access management (CIAM) software. This tutorial uses LoginRadius API to carry out user authentication with React application.
\nYou should know React to be able to follow this tutorial. Also, you should have the node package manager or yarn installed on your PC.
\nFirst, you need to install the LoginRadius React SDK. You can then configure it to provide authentication and role assignment for use within your React application.
\n\n\nLoginRadius is a SaaS-based customer identity and access management (CIAM) system with features to manage customer identity, privacy, and access. It is a simple, implementable solution for adding user authentication and authorization to your website.
\n
LoginRadius has features to add different login authentication options, including email, phone, and social network logins, such as Google and Facebook. It also provides security on these data. Some security features it offers include:
\nLoginRadius comes with different SDKs, including reactjs authentication, to support different frameworks. One of them is the LoginRadius ReactJS SDK, which allows you to add authentication within your React app.
\nFirst, you need to create a LoginRadius account with a Developer Pro plan selected instead of the free plan. This is to be able to access role management features, which are only available in the Developer Pro plan.
\nYou'll get a page requesting you to create a new application. Click on \"create a new application\". After which, a page comes up where you should enter the name of your app and the URL to your app. Here, Input any name and URL of your choice.
\n![\"Naming](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1627245515754_Screenshot+97.png\")
LoginRadius allows you to create a custom login page (an auth page that you can customize from the dashboard), which you can then preview. This is a page provided by LoginRadius that you can easily customize to contain different form contents. Features like user log in, signup, email, and password have been pre-implemented on this page. You'll be using this page for registration and authentication with react application. To learn more on how to customize this page to contain more form contents, refer to customizing Auth Page.
\n![\"A](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1627245718848_Screenshot+100.png\")
To be able to use user roles within your app, you first have to set up these roles and their respective privileges from the dashboard. In this tutorial, you'll set up two roles, namely Admin and Client.
\nTo set up roles, navigate to your dashboard, click on \"user management\".
\nClick on \"manage roles\" and click on \"add roles\". A popup opens in which you add the role name. And in the permission tab, add what permissions that role should have.
\nThis tutorial has added a \"client\" role with a permission called \"view\" and an \"admin\" role with permissions: \"view, edit, delete\". Enable \"set as default\" for the client role to automatically assign the client role to any user in our app by default.
\n![\"Role](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1627245829693_Screenshot+101.png\")
To build your application, you'll be using the command-line interface (CLI) with create-react-app
For node users:
\nnpx create-react-app {project name}Alternatively, if you're using yarn, write:
\nyarn add create-react-app {project name}Next, cd into the directory with the command below:
cd {project name}Next, you'll install the LoginRadius React dependency using the CLI:
\nFor node users:
\nnpm install loginradius-reactyarn:
\nyarn add loginradius-reactTo use the react-router components, you need to install react-router-dom using CLI. Run the following code to achieve this:
For node:
\nnpm install react-router-domyarn:
\nyarn add react-router-domSetup a .env file in the root directory with the following details:
REACT_APP_LR_APP_NAME={app name}\nREACT_APP_API_KEY={your app key}\nREACT_APP_SECRET={your secret key}You can find the keys required above in your dashboard within react user authentication configuration: API key and secret.
\nThe Auth Page(IDX) is a web page created for you that reflects the configurations you create in our dashboard. You'll utilize this page as the login and signup page within your app and set up routes to route users to a different page based on their roles.
\nGo to the index.js file and add:
import React from "react";\nimport ReactDOM from "react-dom";\nimport App from "./App";\nimport { LRAuthProvider } from "loginradius-react";\n\nReactDOM.render(\n<React.StrictMode>\n <LRAuthProvider\n appName={process.env.REACT_APP_LR_APP_NAME || ""}\n apiKey={process.env.REACT_APP_API_KEY || ""}\n redirectUri={window.location.origin}\n >\n <App />\n </LRAuthProvider>\n</React.StrictMode>,\ndocument.getElementById("root")\n);In the above code, you made imports for required modules, set up your LRAuthProvider component with parameters appname and apikeys from your .env file, and also created your redirect URI. In this case, it is equal to your current window.location.origin, which is the URL of the webpage -- in this case, it is our localhost.
Localhosts are whitelisted by default. If you're building your app using a hosted site, you have to whitelist the URL in your dashboard. The entry component in the code is set to the App component.
In the App.js component, add the following code:
import React from 'react';\nimport './App.css';\nimport {\nBrowserRouter as Router,\nSwitch,\nRoute\n} from "react-router-dom";\nimport Auth from "./Landing";\nimport CallAPI from './Return';\n\nfunction App() {\nreturn (\n <Router>\n <div className="App">\n <Switch>\n <Route exact path="/">\n <div>{"Application home"}</div>\n <Auth />\n </Route>\n <Route path="/login">\n <CallAPI />\n </Route>\n </Switch>\n </div>\n </Router>\n);\n}\n\nexport default App;Here, you've set up your routes using Browser routes, Switch, and Route components imported from the react-router-dom module. The path to your home page is blank (\"/\"). It displays the text Application home. It runs an Auth component that was earlier imported. A second route is made for a second page with a path of \"/login\" that runs the CallAPI component on the new page.
You'll then create a page that will serve as the landing page for your site. To do this, create a Landing.js file in your src folder and input the following code:
import { useLRAuth } from "loginradius-react";\n\nconst Auth = () => {\n\nconst {isAuthenticated,loginWithRedirect,logout } = useLRAuth();\n if (isAuthenticated) {\n return (\n <div>\n <button onClick={() => logout()}>\n Log out\n </button>\n </div>\n );\n } else {\n \n return <button onClick={() => loginWithRedirect("/login")}>Login/Register</button>;\n\n }\n}; \n\nexport default Auth;In the code written above, you've used loginWithRedirect, loginWithPopup, and logout authentication methods from the useLRAuth hook in your components to set up the authentication flow within your React application. You can also get access to the authentication state using isAuthenticated. The isAuthenticated method is used to check if the user is already logged into the app; it true, it returns true and displays a log out button that is connected to a logout function. Else, it returns false and displays a Login/Register button, which when clicked is set up to redirect to the path /login. The loginWithRedirect() and logout() methods use the Auth Page (IDX), where registration and login functionality is already implemented to perform these tasks.
You can style the button to make it easier to see by adding the following code within your App.css file:
//for our login button on our landing page \nbutton{\n background-color: #2d56da;\n color: #fff;\n padding: 20px;\n border-radius: 8px;\n}\n//for the output in our login route which we will cover later\nspan{\n font-size: 24px;\n height: 80vh;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}As an additional feature, you can use the LoginRadius React SDK to access the API to get parameters that are assigned upon logging in using the login form. You can use this method to check if a user is a client or administrator. Whenever a user creates an account using the form, the user is assigned a unique user-id called Uid, which you can view in your dashboard under \"manage users\". You can reference this user-id to determine your users’ roles. To do this, you need to fetch and return the Uid of the current user. The fetch request for the user role requires the Uid and your app secret key as parameters within the URL.
In your src folder, create a file name return.js, and populate it with the following code:
import React, { useEffect, useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n\n const [resp, setResp] = useState(null);\n const { user } = useLRAuth();\n const uid = user["Uid"];\n \n\n useEffect(() => {\n (async () => {\n try {\n const response = await fetch(\n `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n {}\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n })();\n });\n\n if (!resp) {\n return <div>Loading...</div>;\n }\n\n return <span>{JSON.stringify(resp, null, 2)}</span>;\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n onRedirecting: () => <div>Loading...</div>,\n});Here, within your CallAPI component, you've used usestate hook to create two states resp and setResp to check if you have received a response from the API. A constant user was made to use the LAuth method to get the current user data, and then the next line gets the id of the current user. The useeffect React hook that runs after the render contains an asynchronous function is used to fetch the role of the current user uid. It returns the data and outputs it in JSON form, which value is given to SetResp. Else, it throws an error if the fetch request fails.
Since it is an asynchronous function, the code below it runs while fetching and awaiting a response. resp is false during this time while waiting for the result of the asynchronous function. Therefore, it outputs \"Loading...\" on the screen until the async returns the data that it then outputs.
The last code block: export is simply used to show \"Loading...\" on the screen during redirecting.
You can run the present code by cd into your parent directory and running:
npm startWhen it successfully starts the server, you would have a similar page as follows:
\n/ path in your routes within App.js. If you click on the \"login/register\" button, you'll be redirected to your custom Auth Page (IDX) provided by LoginRadius, where you can create a user account and login. You can manage the users who have accounts from your dashboard in \"manage users\".
After logging in auth react js, with your user, you'll get redirected to the /login route that then runs the CallAPI component and gives you a result similar to the following:
\nThis is the current role of the user. Any user would have the role of client assigned since you've set to assign the client role by default to all our users from your dashboard during the creation of roles.
\nIn the above section, you've created a user account with different parameters for the email and password. Upon creation of an account, you get directed to the login page, where you can sign in using the credentials of the created account. Authentication was carried out on the parameters in the input field by the LoginRadius API set up in the Auth Page.
\nYour user authentication is carried out by the API. This checks the input details against the registered user details. If any input not matching this is put in the form, you'll get an alert \"user does not exist\" upon clicking the login button. Upon logging in, your app key and secret are sent by your app to the authentication server. Upon authentication, the server responds with an access token and authorizes the user. To view this token, you can create a new file called Token.js and insert the following code into it:
import React, { useEffect, useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n const { getAccessTokenSilently } = useLRAuth();\n const [resp, setResp] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const token = await getAccessTokenSilently();\n const response = await fetch(\n `https://api.loginradius.com/identity/v2/auth/access_token/validate?access_token=${token}&apiKey=${process.env.REACT_APP_API_KEY}`,\n {}\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n })();\n }, [getAccessTokenSilently]);\n\n if (!resp) {\n return <div>Loading...</div>;\n }\n\n return (\n <span>{JSON.stringify(resp, null, 2)}</span>\n );\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n onRedirecting: () => <div>Loading...</div>, \n });The code above runs a fetch request for the access token and displays it when the data is returned. To view the output of this code, import the newly created file into your App.js file. Since the name of the function component in the code is still CallAPI, you don't need to edit the component called in the login route. You just need to comment out the former import for the component from your return.js file as shown below:
import "./App.css";\nimport { BrowserRouter as Router, Switch, Route } from "react-router-dom";\nimport Auth from "./Landing";\n// import Login from "./Login";\nimport React from 'react';\n// import CallAPI from './Return';\n import CallAPI from './Token';\n\nfunction App() {\n return (\n <Router>\n <div className="App">\n <Switch>\n <Route exact path="/">\n <div>{"Application home"}</div>\n <Auth />\n </Route>\n <Route path="/login">\n <CallAPI />\n </Route>\n </Switch>\n </div>\n </Router>\n );\n}\nexport default App;You then need to run the code by starting the server using the npm start command. Upon starting the server, when you log in, you'll have your user token displayed on the screen. Your output will be similar to the following:
Here, you can see the access token and its details. You can then return your code to the previous CallAPI component imported from Return.js.
You can view and manage user accounts from the dashboard. You can find the panel for this under \"User management\":
\n![\"User](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1628263707754_Screenshot+117.png\")
Manage users:
\n![\"Manage](\"https://paper-attachments.dropbox.com/s_14B4BD8EDBFA59296DCDB812AB5C6EF8CE164AAF0A2268A9E90E57893E23504E_1628263762129_Screenshot+119.png\")
Here, you can view the account information of your users, search for a particular user details using the email, Uid, or phone number as the query in the search box. Also, the panel provides an option to reset the password of a user, block users, and delete users as the above image shows. You can create new users by clicking on the \"add user\" button and filling in the details of the new user.
\nTo view all roles and permissions for your app, change the URL in the fetch request to https://api.loginradius.com/identity/v2/manage/role, keeping the rest of the URL the same. That is, it still contains your appkey and appsecret parameters.
Reload your page, and you'll have an output similar as follows:
\nThe user has both client and admin roles because you've added client roles by default to all our users. To assign specific roles to different people, first you should uncheck the set as default in the \"manage roles\" section of your dashboard. You can then run an In the code above, you've created a const email that returned an array containing the user email. To get the email specifically, you've created another variable The This tutorial covered: These privileges can be used to give users certain permissions as to what they can do on your website. LoginRadius is a great tool and is easy to implement if you want to implement authentication in your application. A working version of the code used in this tutorial is available on Github. In web applications, you try to decide when to use either JSON Web Tokens (JWTs) or sessions (cookies) for authentication. When you browse the web you use HTTP, which is a stateless protocol. So, the only way to remember the states of your application is using either sessions or tokens. This article deep dives into: Deciding to choose between JWT or session is not just choosing one over the other. You need to look at some factors to determine which one to use in an application. In order to figure this out, you need to compare both approaches -- JWT and session -- to authenticate users. This article starts with how server-side sessions with a session store work, then looks at how client-side sessions with JWT work. Suppose, you have a website with a login form. You enter your email ID and password, and your browser sends a request to the server. Your server compares the password hashes, and if those hashes match, a session is created with a specific session ID. Then, the server returns a cookie with the session ID and the cookie is HTTP only, so it can not be read by any javascript that is not yours. It is also secured so that the cookie is never transferred over an insecure connection; that is, something that is not encrypted. Otherwise, someone can intercept the communication, like a man in the middle attack. If you make a follow-up request, your browser automatically sends this cookie along. Take a look at the session ID and fish it out. Instead of creating a session in your session store, you check whether the password hashes match. And if they do match, you can just create a JSON signature token and the token is signed with the secret. If someone tries to modify the payload, you will know and the signature validation will fail. You can return the web signature token that can be put in a cookie, which is way better. Because, if you don't do that, there is a possibility that a third-party javascript can access it. Imagine a scenario in which a bank customer's info has been breached and the customer calls the bank to lock the account. This will be an issue if the bank uses JWT for authentication as JWT is stateless. Although you can find a workaround to do this by introducing state, it just defeats the purpose of having a JWT token in the first place, standing a chance of logging everyone out including the customer. With Sessions, logging out that one particular customer won’t be a problem at all as the customer's state is stored. When using server-side sessions, you don't know who is currently logged into your application as this can be useful to inflict the history of what a person is currently doing. It’s a better idea to use sessions in industries like health care, banking, insurance, or companies that deal with money. It's also good to note that JWT is signed and anyone can read it or get an idea of how data or ID is structured, or how many rows data has, which is not the case for sessions as the data is not visible to users. Session cookies take up very little bandwidth, whereas the bandwidth consumption will be higher in the JWT-based approach because the tokens tend to get bigger and you have the signature you have to send along for each follow up request; whereas if you have the session cookie, it's really small because its just the session ID that is being sent over. A lot of breaches that happen in companies is a result of an internal breach from an employee or insider that is stealing data or doing weird things. It is really important to be able to revoke privileges immediately. Imagine a scenario where one person is locked in and has admin rights. Say, the token is valid for ten minutes or so. If for whatever reason you don't want that person to have admin privileges anymore, you can easily revoke the person's access if you use sessions, but might find it difficult if you use JSON web tokens. This section discusses the advantages of using JWT over sessions and scenarios where sessions do not cut it. One of the “issues” with sessions is scalability. The argument is that sessions are stored in memory and servers are duplicated to handle the application load, therefore, limiting the scalability of the application. JWT, on the other hand, has higher scalability due to its statelessness. If you use a load balancer, you can easily pass along your users to several servers without worrying, as there is no state or session data stored anywhere, making it easy for gigantic scale workloads like that of Google and Facebook. A downside of the sessions is their maintainability, as the sessions need to be maintained. Somewhere on someone's server, a record will need to be created every time a user is authenticated. This is done in memory. The more the users are authenticated, the greater the overhead on your server. There is no need for maintainability in JWT as no state is stored, making it a better choice in this scenario. When using sessions in an applications, there will come a time when you need to scale or expand the data for it to be used on multiple devices. Then, you'll need to worry about things like cross-origin resource sharing or even forbidden requests. But with JWT, you don't have to bother about CORS as you can provide data to all sorts of devices and applications. Setting up a quick header configuration gets rid of any CORS problem you would have encountered. As long as a valid user has a valid token, data and resources are made available from any domain. You can easily allow selective permissions for third-party applications with the help of JWT. Say, you build an application that you like to share permissions with other applications; for instance, sharing a video you watched on Facebook to friends on Instagram. You can also get creative building APIs that hand the special tokens to other applications so that user data can be accessed. Auth tokens are usually sent over the network and as such are vulnerable to attack. These kinds of attacks are: Although it may seem that these types of attacks are not likely to happen, it's important to take security seriously and implement appropriate measures. The vulnerability of the system is based on the cumulative probabilities of all the types of attacks. In some ways, you can mitigate the above attacks: Database and filesystem access: To control damage caused by unauthorized access to your database or filesystem, you could do the following: Some people who use JSON web tokens return the token and store it in local storage. This can be very dangerous as third party javascript, browser extensions, and malicious CDN scripts can have access to the token. But if you put it in a cookie, no javascript access, or even you has access to it. Another thing to note is that when using cookies, you need to mitigate CSRF. Preventing it most of the time will have to do with installing a library and writing a few lines of code. In the article, you've learned the differences in using sessions and JSON web tokens for authentication, how serverside session store works, the advantages of sessions over JWT, and other things concerning the structure of JWT. Azure Key Vault is a highly secure, dependable, and simple method to store your keys and secrets in the cloud. This article talks about: Use the following steps to read a secret stored in an Azure Key Vault instance. Create and Configure Azure Key Vault Create a new ASP.NET 5 Core application To execute the code examples provided in this article, you should have each of the following: If you don't have an Azure account, you can create one for free here: Azure Login Azure Key Vault is a cloud service that helps you store your application's secrets securely: You can store and manage the keys, passwords, certificates, and other secrets. You can also leverage Azure Key Vault to set parameters shared among multiple applications, including applications running in App Service. It enables you to isolate the sensitive and non-sensitive data in your application. For example, you can use application settings to store default parameters or key-value pairs containing some default settings used by the application. On the contrary, you can use Azure Key Vault to store API keys, secret keys, database connection strings, or Client IDs used in your application. Managed identity is a concept that eliminates the need of having to store credentials once an application has been deployed in the cloud. By using managed identity, you can securely access a variety of Azure services without having to store any credentials like connection strings or passwords. Managed identity may be used to connect to Key Vault from an Azure Function App or an Azure Web App, as well as to connect to Azure Blob Storage from an Azure Web App. Managed identities are of the following two types: You'll now create an Azure Web App instance with the permissions to access Azure Key Vault. Adhere to the steps given below that would guide you to create a new Azure Web App instance while you’re within the Azure portal: Select \"Web App\" from the list Mention the resource group and app service plan for your web app Once the Web App has been created successfully, you'll be able to see it on the Home screen of the Azure Portal. To enable the system-assigned managed identity for the Azure Web App we just created, follow the steps given below: In this section, you’ll examine how to create and configure an Azure Key Vault instance. You'll now create an Azure Key Vault in the Azure Portal and then add a secret to it. To create a new Azure Key Vault instance, navigate to the Azure Portal and follow the steps below: First of all, you'll create an ASP.NET Core 5 web application. The project type comes bundled with all the template files to create a web application, even before you add something. Follow the steps given below to create a new ASP.NET Core Web application within the Visual Studio 2019 IDE. A new ASP.NET 5 Core application will be created in Visual Studio. To work with AzureKeyVault, you must install You may install these packages in one of two ways: Either via the NuGet Package Manager integrated into the Visual Studio 2019 IDE or by running the following command(s) in the Package Manager Console: In this section, you’ll examine how to read secrets from AzureKeyVault. Create a section named \"KeyVault\" in the To access the secrets stored in the AzureKeyVault, you can take advantage of SecretClient pertaining to the Create a class named \"KeyVaultManager\" that extends the \"IKeyVaultManager\" interface and implements the The \"KeyVaultManager\" class leverages the \"SecretClient\" class to retrieve secrets stored inside the AzureKeyVault. The \"KeyValueController\" takes advantages of the \"KeyValueManager\" class to read the secret value for a given secret name and returns the value stored in there. You should specify the necessary code for dependency injection to work in the \"ConfigureServices\" method of the \"Startup\" class as shown in the code snippet given below: To deploy the application, follow the steps below: Lastly, you can use Postman to send a Azure key vault helps you to keep your application's secrets out of the application. You can use it to isolate secrets from your code files. These secrets include connection strings, API keys, environment variables, etc. You can take advantage of Azure Key Vault to keep secrets out of source control or out of your application in a centralized storage place. In this article, you've used managed identity to connect an Azure web app in .NET to an Azure Key Vault and retrieve secret value from there. The complete source code of the application discussed in this article can be found here: Source Code You should be familiar with Python and Django, a Python framework. First, we briefly introduce LoginRadius, what it is, and some benefits of using it; then, will move over to see how to implement user registration and authentication in Django using LoginRadius. What is LoginRadius? LoginRadius is a SaaS-based CIAM platform. It offers simplified, robust features to manage customer identity, privacy, and access -- allowing developers and businesses to provide a seamless and secure digital experience for their customers. The developer-friendly CIAM provides a comprehensive set of APIs for registration, authentication, identity verification, single sign-on (SSO), and more. Why should we use LoginRadius? LoginRadius offers many more benefits than above. You can learn more here. To get started with LoginRadius, you have to first create a free developer account. If you already have an account, log into your LoginRadius dashboard\nYou will see a page like this: When you create an account, LoginRadius sets up a free app for you. This is the app you are going to integrate with Django. Here my app name is \"tammibriggs\". Click on your app, and you will see a page like this: There is one more thing LoginRadius automatically creates for you: an Auth Page (IDX). At this point, you know what LoginRadius is, its benefits, and how to get started with LoginRadius. Let’s see how to integrate LoginRadius with a Django application. This section covers: You must have python installed, and the minimum supported version is 2.7. Getting API Credentials Before using any of the APIs that LoginRadius provides, you need to get your App Name, API Key, and API Secret.\nOn your LoginRadius app, navigate to Configuration > API Credentials You will find your API key under the API Key and Secret subsection. Whitelist your Domain For security reasons, LoginRadius processes the API calls that are received from the whitelisted domains.\nLocal domains ( Installation of Dependencies You need to install the LoginRadius Python SDK. It provides functionalities that allow Python programs to communicate with LoginRadius APIs.\nOpen VS Code, PyCharm, or any other editor you use in general.\nIn the terminal, type: These are the dependencies you need to integrate LoginRadius into your Django application. Setting up Django You can accomplish all this with the following commands in your terminal: Here, the project name is radiusAuth and the app radiusApp but you can use any name you want.\nYou now have a radiusAuth project and radiusApp app setup. Configure Project You need to tell Django about the app you created and the location of the app's Once you have added it, go over to the Remember, we said that there is a webpage LoginRadius automatically created for you: an Auth Page (IDX), which already has registration and authentication implemented. You will utilize this web page to meet your registration and authentication needs.\nHow would you do that? You can access your registration and login page with the following URLs. Registration Page URL: Login Page URL: So, what you will do now is to create links or buttons that users can click to access these URLs.\nFirst, create a view that will be responsible for displaying your registration and login page.\nEdit the All this view does is render an HTML page as a response. Now, you need to add the URL pattern for this view. In the The Create a static directory and a Open the Now, create the template for your Create a templates directory and a Open your terminal and type the following command: Open the We used an NOTE: Don’t forget to replace the {APP_NAME} placeholder with your LoginRadius app name. Also, in the register and login link, we replaced the {RETURN_URL} parameter with Run the development server and open Now, when you click the register or login button, you will see a page like this: When LoginRadius successfully authenticates a user, it attaches an access token in the query string as a token parameter to the REDIRECT_URL. In this section, you are going to retrieve the authenticated user data using access token. But first you need to initialize LoingRadius SDK with your APIKEY and APISECRET. Intializing LoginRadius SDK Create a new Open your terminal and type this command: Open the Replace APIKEY and APISECRET with your respective LoginRadius API credentials. Now, create the view that will be responsible for retrieving user data. Open the In this code snippet, we imported the initialized LoginRadius class from the We also introduced a new function called Now, add the URL pattern and also create a template for your views. Modify the Head over to the templates directory in the radiusApp directory and create a In the termainal type: Open your Here we displayed the Provider, Email and NoOfLogins from the Now, if you run your development server, and then register and login a user, you should see a page like this: To see the entire data present in the In this tutorial, we discussed how to use LoginRadius for registration and authentication in Django. We started by introducing LoginRadius, what it is, its benefits, and how to get started with it. Then, we illustrated building a demo application with Django and implemented registration and authentication using LoginRadius. GitHub repo: radiusAuth 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. What does it mean for user authentication? 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). 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. In this article, we’ll discuss: Third-party cookie restrictions affect user authentication in three ways, as follows. 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. 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. 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. For example, you have apps at 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. 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. 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. 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). Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative. Specific to authentication, Google recommends the following: 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. For example, a user visits If the user visits You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes. If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions. 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. 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. 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. It is most suitable when loading cross-site resources and interactions, such as: 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. 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. With Related Website Sets, you can declare a Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe. 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. The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using 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. 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. FedCM API enables federated SSO without third-party cookies. With FedCM API, a user follows these steps for authentication: You can access a user demo of FedCM here: FedCM. For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide. Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different. We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers. Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out. 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. Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does. 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. Top-level site: It is the primary site a user has visited. First-party cookie: A cookie set by the top-level site. 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 Assigning Client and Admin roles
\nif block to check if the users’ logged-in emails are equal to a particular set of emails and then perform the assignment of admin roles to them; else, assign the client roles instead. Modify your return.js file as below:
\nimport React, { useState } from "react";\nimport { useLRAuth, withAuthenticationRequired } from "loginradius-react";\n\nconst CallAPI = () => {\n\n const [resp, setResp] = useState(null);\n const { user } = useLRAuth();\n const uid = user["Uid"];\n var response;\n const email = user["Email"];\n var emailmain = email[0].Value;\n \n \n (async () => {\n if (emailmain.toLowerCase() === "admin@example.com"){\n try {\n \n \n response = await fetch(\n `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n {\n method: "PUT",\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n roles: ["Admin"],\n }),\n }\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n }\n else {\n try {\n response = await fetch(\n `https://api.loginradius.com/identity/v2/manage/account/${uid}/role?apiKey=${process.env.REACT_APP_API_KEY}&apiSecret=${process.env.REACT_APP_SECRET}`,\n {\n method: "PUT",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify({\n roles: ["Client"],\n }),\n }\n );\n setResp(await response.json());\n } catch (e) {\n console.error(e);\n }\n }\n })();\n \n\n if (!resp) {\n return <div>Loading...</div>;\n }\n\n return <span>\n Welcome user : {uid}<br/>\n Email : {emailmain}<br/>\n {JSON.stringify(resp, null, 2)}\n </span>;\n};\n\nexport default withAuthenticationRequired(CallAPI, {\n onRedirecting: () => <div>Loading...</div>,\n});emailmain which gets the value at a particular array position containing the user email.async request block has now been modified to check if the user email being used for logging in is equivalent to a particular email which you've declared. Alternatively, you can have your emails pulled from a database and assign the admin roles to the ones you want. The else block assigns a client role to emails that do not meet the first criteria. When you create a new account with an email similar to what I have in the if block, that is admin@example.com; when rerouted to the /login path, you'll discover that the role of admin was assigned while any other email will have the client role assigned upon login. The return statement returns the user id of the logged-in user, the email, and then the role in a JSON format. The output would be similar to the following:Conclusion
\n\n
\nGoals
\n\n
\nJWT vs. Session: What to Use?
\nComparison: JWT and Session
\n![\"authentication](\"https://paper-attachments.dropbox.com/s_483BCD9E50710AD4C34073FFCB4BDCD46B2FB758D7EDCF747C5F8981B4094012_1628279671087_How+sessions+work.png\")
How Server-side Sessions Work With a Session Store
\n![\"server-side](\"https://paper-attachments.dropbox.com/s_483BCD9E50710AD4C34073FFCB4BDCD46B2FB758D7EDCF747C5F8981B4094012_1628279971421_sessionswork2.png\")
How Client-side Sessions Work with JWT
\n![\"client-side](\"https://paper-attachments.dropbox.com/s_483BCD9E50710AD4C34073FFCB4BDCD46B2FB758D7EDCF747C5F8981B4094012_1628281019519_Clientside.png\")
Problems with JWT and Statelessness
\nData Visibility and Control
\nBandwidth Consumption
\nRevoking Roles and Privileges in JWT and Session-based Systems
\nJWT: Advantages
\nScalability
\nMaintainability
\nMultiple Platforms and Domain
\n
\nAccess-Control-Allow-Origin: *Platform Independent
\nAttacking JWTs vs. Session-based Authentication
\n\n
\n\n
\n\n
\nCookies vs. Local Storage
\nConclusion
\nIntroduction
\n\n
\n\n
\n\n
\n\n
\nPrerequisites
\n\n
\nWhat is Azure Key Vault?
\nUnderstanding Managed Identity
\n\n
\nCreate a Web App in the Azure Portal
\n\n
\nEnable Managed Service Identity for your Web App
\n\n
\nCreate and Configure Azure Key Vault
\nCreate a new Azure Key Vault Instance
\n\n
\n\n
\n\n
\nCreate a New ASP.NET 5 Core application
\n\n
\n\n
\nInstall the NuGet Packages
\nMicrosoft.Extensions.Azure and Azure.Security.KeyVault.Secrets packages. While you can use the former for injecting dependencies for accessing Azure services, you can use the latter to access secrets via a SecretClient instance.Install-Package Microsoft.Extensions.AzureInstall-Package Azure.Security.KeyVault.SecretsRead Azure Key Vault Secrets in .NET Core
\nSpecify the Vault Uri in AppSettings
\nappsettings.json file and specify a key named \"VaultUri\" in there as shown below:\"KeyVault\": {\"VaultUri\": \"https://applicationsecretsdemo.vault.azure.net/\"}Access Secrets from AzureKeyVault
\nAzure.Security.KeyVault.Secrets namespace. Create an interface named \"IKeyVaultManager\" with the following code in there:
\npublic interface IKeyVaultManager\n\n{\n\npublic Task<string> GetSecret(string secretName);\n\n}GetSecret method as follows:
\npublic class KeyVaultManager:IKeyVaultManager\n\n{\n\nprivate readonly SecretClient _secretClient;\n\npublic KeyVaultManager(SecretClient secretClient)\n\n{\n\n _secretClient = secretClient;\n\n}\n\npublic async Task<string> GetSecret(string secretName)\n\n{\n\ntry\n\n{\n\nKeyVaultSecret keyValueSecret = await\n\n_secretClient.GetSecretAsync(secretName);\n\nreturn keyValueSecret.Value;\n\n}\n\ncatch\n\n{\n\nthrow;\n\n}\n\n}\n\n}The KeyValueController Class
\n
\npublic class KeyVaultController : ControllerBase\n\n{\n\nprivate readonly IKeyVaultManager _secretManager;\n\npublic KeyVaultController(IKeyVaultManager secretManager)\n\n{\n\n_secretManager = secretManager;\n\n}\n\n[HttpGet]\n\npublic async Task<IActionResult> Get([FromQuery] string secretName)\n\n{\n\ntry\n\n{\n\nif (string.IsNullOrEmpty(secretName))\n\n{\n\nreturn BadRequest();\n\n}\n\nstring secretValue = await\n\n_secretManager.GetSecret(secretName);\n\nif (!string.IsNullOrEmpty(secretValue))\n\n{\n\nreturn Ok(secretValue);\n\n}\n\nelse\n\n{\n\nreturn NotFound("Secret key not found.");\n\n}\n\n}\n\ncatch\n\n{\n\nreturn BadRequest("Error: Unable to read secret");\n\n}\n\n}\n\n}Register the Dependencies in the ConfigureServices Method
\n
\npublic void ConfigureServices(IServiceCollection services)\n\n{\n\nservices.AddAzureClients(azureClientFactoryBuilder =>\n\n{\n\nazureClientFactoryBuilder.AddSecretClient(\n\nConfiguration.GetSection("KeyVault"));\n\n});\n\nservices.AddSingleton<IKeyVaultManager,KeyVaultManager>();\n\nservices.AddControllersWithViews();\n\n}Deploy the Application to Azure
\n\n
\n\n
\n\n
\n\n
\nExecute the Application
\nHttp Get request to the endpoint to retrieve the stored secret as shown below:Summary
\nPrerequisite
\nOverview
\nIntroduction
\n\n
\nGetting started
\n![\"Dashboard\"](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849810764_Screenshot+34.png\")
![\"LoginRadius](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849852750_Screenshot+36.png\")
Integrating LoginRadius with a Django Application
\n\n
\n\n
\n![\"API](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849573473_Screenshot+38.png\")
![\"API](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849474291_Screenshot+44_LI.jpg\")
http://localhost and http://127.0.0.1) are whitelisted by default. This means you don't have to worry about whitelisting your domain if you are running your application on Django's development server. But in a production environment, you definitely have to whitelist our domain.\nTo whitelist your domain, in your LoginRadius Dashboard, navigate to Configuration > Whitelist Your Domain and add your domain name.![\"Whitelist](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849403941_Screenshot+41.png\")
\n$ pip install LoginRadius-v2 requests cryptography pbkdf2\n
\nurls.py file in your app.
\n$ python -m pip install django\n\n$ django-admin startproject radiusAuth\n\n$ cd radiusAuth\n\n$ python manage.py startapp radiusApp\n\n$ python manage.py migrate\n\n$ cd radiusApp\n\n$ type nul > urls.pyurls.py file.\nFirst, let Django know the location of your app.\nIn your radiusAuth project navigate to radiusAuth/settings.py, modify the INSTALLED_APPS:radiusAuth/settings.py
\nINSTALLED_APPS = [\n "django.contrib.admin",\n "django.contrib.auth",\n "django.contrib.contenttypes",\n "django.contrib.sessions",\n "django.contrib.messages",\n "django.contrib.staticfiles",\n "radiusApp",\n]urls.py file in the same directory, modify the urlpatterns and include the apps url location.radiusAuth/urls.py
\nfrom django.contrib import admin\nfrom django.urls import path, include\n\nurlpatterns = [\n path('admin/', admin.site.urls),\n path('', include('radiusApp.urls'))\n]User Registration and Authentication
\n
\nhttps://{APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url={RETURN_URL}
\nhttps://{APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url={RETURN_URL}\n
\nviews.py file of the radiusApp application and add the following code:radiusApp/views.py
\nfrom django.shortcuts import render\n\ndef register_n_login(request):\n return render(request, 'index.html')urls.py file of your radiusApp application, add the following code:radiusApp/urls.py
\nfrom django.urls import path\nfrom . import views\n\nurlpatterns = [\n path('', views.register_n_login, name="access"),\n]register_n_login view can now be accessed by a URL. It's time to create a template for your view. But before you do that, let me introduce some basic styling you will use in your application.style.css file in your app directory.\nOpen your terminal and type the following command:radiusAuth/radiusApp
\n$ mkdir static\n$ cd static\n$ type nul > style.cssstyle.css file and the following CSS styles:
\n*{\n margin: 0;\n border: 0;\n}\n\nbody{\n background-color: hsl(210, 15%, 95%);\n}\n\n.wrapper{\n width: 90%;\n height: 100vh;\n margin: 0 auto;\n display: flex;\n align-items: center; \n flex-direction: column;\n justify-content: center;\n}\n\n.choice{\n text-align: center;\n line-height: 30px;\n}\n\n.choice span{\n color: hsl(207, 37%, 76%);\n}\n\n.choice span:nth-child(1){\n font-size: 1.3rem;\n color: hsl(210, 7%, 55%);\n}\n\n\n.access{\n width: 100%;\n max-width: 400px; \n height:150px;\n display: flex;\n justify-content: space-evenly;\n flex-direction: column;\n align-items: center;\n background-color: white;\n margin-bottom: 20px;\n font-size: 1.2rem;\n}\n\n.access button{\n width: 90%;\n padding: 0.7rem 0.4rem;\n background-color: hsl(207, 73%, 30%);\n color: white;\n}\n\n.profile{\n width:100%; \n max-width: 400px; \n min-height: 300px;\n background-color: white;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.profile__head{\n width: inherit;\n flex: 0.3;\n background-color: hsl(207, 73%, 30%);\n display:flex;\n align-items:center;\n justify-content: center;\n}\n\n.profile__head h4{\n font-size: 36px;\n font-weight: 400px;\n color: white;\n}\n\n.profile__details{\n width: 90%;\n margin: 0 auto;\n line-height: 35px;\n flex: 0.5;\n}\n\n.profile__details span{\n font-size: 1.2rem;\n}\n\n.label{\n color: hsl(210, 7%, 55%);\n}register_n_login view.index.html file in your app directory.radiusAuth/radiusApp
\n$ mkdir templates\n$ cd templates\n$ type nul > index.htmlindex.html file and add the following HTMLtemplates/index.html
\n{% load static %}\n \n <!DOCTYPE html>\n <html>\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Registration and Login page</title>\n <link rel="stylesheet" href="{% static 'style.css' %}">\n </head>\n \n <body>\n <div class="wrapper">\n \n <div class="access">\n <span>Open an account with us</span>\n <button onclick="window.location.href='https://{APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url=http://127.0.0.1:8000/';">\n Register\n </button>\n </div>\n <div class="choice">\n <span>OR</span><br>\n <span>If you already have account</span>\n </div>\n <div class="access">\n <span>Log into your account</span>\n <button onclick="window.location.href='https://{APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=http://127.0.0.1:8000/profile/';">\n Login\n </button>\n </div>\n \n </div>\n </body>\n </html>onclick event on both the register and login buttons, which when clicked changes the window's location to the Auth Page (IDX) register and login page respectively.http://127.0.0.1:8000/profile/, which is the user profile page you are going to create shortly.http://127.0.0.1:8000/, you will see a page like this:![\"Register](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849064162_Screenshot+48.png\")
![\"Auth](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626849029873_Screenshot+46.png\")
\n
\nRetrieve User Data using Access Token
\nconfig.py file in your radiusApp directory.radiusAuth/radiusApp
\n$ type nul > config.pyconfig.py file and add the following lines of code:radiusApp/config.py
\nfrom LoginRadius import LoginRadius as LR\n\nLR.API_KEY = "API_KEY"\nLR.API_SECRET = "API_SECRET"\nloginradius = LR()views.py file in your radiusApp directory and add the following lines of code:radiusApp/views.py
\nfrom django.shortcuts import render, redirect\nfrom django.http.response import HttpResponse\nfrom .config import loginradius\n\ndef register_n_login(request):\n#...\n\ndef profile(request):\n\n if request.GET.get('token'): \n try:\n user_data = loginradius.authentication.get_profile_by_access_token(request.GET.get('token'))\n except Exception as inst:\n return HttpResponse(inst)\n else:\n return redirect('access')\n\n return render(request, 'profile.html', {'user_data':user_data})config.py file and also imported redirect and HttpResponse from there respective modules.profile. In this function we did the following:\n
\ntry and except block. In the try block we used the authentication.get_profile_by_access_token method to retrieve the user data from the access token and assigned it to a variable called user_data while in the except block we returned a HttpResponse of the error that occurred if the try block fails.try block successfully retrieved the user's data, we rendered a profile.html page, and also attached the user_data variable to the response.urls.py file in the radiusApp directory.radiusApp/urls.py
\nurlpatterns = [\n #...\n path('profile/', views.profile, name="profile")\n ]profile.html file.radiusApp/templates
\n$ type nul > profile.htmlprofile.html file and add the following HTML code:templates/profile.html
\n{% load static %}\n \n <!DOCTYPE html>\n <html>\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <link rel="stylesheet" href="{% static 'style.css'%}">\n <title>Profile</title>\n </head>\n \n <body>\n \n <div class="wrapper">\n <div class="profile">\n <div class="profile__head">\n <h4>profile details</h4>\n </div>\n \n <div class="profile__details">\n <span>\n <span class="label">Provider: </span> {{user_data.Provider}}<br>\n {% for i in user_data.Email %}\n <span class="label">Email: </span>{{i.Value}}<br>\n {% endfor %}\n \n <span class="label">Number of login:</span> {{user_data.NoOfLogins}}\n </span>\n </div>\n </div> \n </div>\n \n </body>\n </html>user_data. These are just some of the data present in the user_data.![\"Profile](\"https://paper-attachments.dropbox.com/s_06CCF8584138C77AD580AFE76E986CC1E8C4C360158F4A6548D0F9EAC304864E_1626848979749_Screenshot+51.png\")
user_data, you can do something like this in your profile.html, file:
\n{% load static %}\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <link rel="stylesheet" href="{% static 'style.css'%}">\n <title>Profile</title>\n </head>\n\n <body>\n\n {{user_data}}\n\n </body>\n</html>Conclusion
\n\n
\nHow is User Authentication Affected?
\nExternal Identity Providers
\nWeb SSO
\nexample.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.Federated SSO
\n\n
\nChrome’s Alternatives for Third-Party Cookies
\n\n
\nCookies Having Independent Partitioned State (CHIPS)
\na.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com. 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.Storage Access API
\nRelated Website Sets
\nprimary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.resuestStorageAccessFor() API.Federated Credential Management (FedCM) API
\n\n
\nHow is LoginRadius Preparing for the Third-party Cookie Phase-out?
\nIn Conclusion
\nGlossary
\na.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.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":42,"currentPage":8,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}