{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/12","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Hey Everyone !!! This blog will walk you through the steps necessary to quickly implement authentication mechanisms for your React…","fields":{"slug":"/engineering/implement-authentication-in-react-using-loginradius-cli/"},"html":"

Hey Everyone !!! This blog will walk you through the steps necessary to quickly implement authentication mechanisms for your React application by leveraging LoginRadius and the LoginRadius CLI with the help of examples.

\n

Using the LoginRadius CLI, you can perform basic actions of your LoginRadius Dashboard through the command line. The actions include login, register, logout, social configuration, domain whitelisting, site management, etc. Once the actions are performed, changes will be reflected in your application.

\n

Configuring LoginRadius

\n

Please follow the steps below to install the LoginRadius CLI on your system. Once completed, use the CLI to finish registration on the LoginRadius portal and create your application.

\n

LoginRadius CLI Setup

\n

Mac or Linux

\n\n

Other Platforms

\n\n

Once you have the CLI installed, the following command can be used to complete the registration process via the LoginRadius portal.

\n
$ lr register
\n

This command will open the Portal in the browser, where you can register yourself and create the app.

\n

\"alt_text\"

\n

If you already have a LoginRadius account, use the command below to directly login :

\n
$ lr login
\n

Once you successfully register or login, the below message will be visible in a new tab on the browser. Close the tab and return to the CLI.

\n
You are Successfully Authenticated, Kindly Close this browser window and go back to CLI.
\n

If your account has multiple sites (for Developer/Developer Pro Plans), an option will be given to choose the site that you wish to login with. You can choose a site according to your preference.

\n
$ lr login\n  Successfully Authenticated, Fetching Your Site(s)...\n? Current Site is: <value>, Want to Switch? Yes\n? Select the site from the list: <value>\n  Site has been updated.\n  Successfully Logged In
\n

Fetching Application API Credentials

\n

Once the login/register process has been completed, run the lr get config command to fetch your API Key/Secret as shown below.

\n

\"alt_text\"

\n

Configuring Callback URLs

\n

Here, a callback URL refers to a URL in your application that LoginRadius would redirect a user to after they have been authenticated. These URLs must be added to your Application Configuration. If not set, users will be unable to login into the application and receive an error.

\n

\"alt_text\"

\n

For security reasons, LoginRadius only processes API calls that are received from the whitelisted domains. To get the list of whitelisted domains, run lr get domain command from the CLI. Similarly, to add a domain, use the lr add domain command.

\n
\n

For the purposes of this tutorial, make sure that you set http://localhost as a whitelisted domain.

\n
\n

\"alt_text\"

\n

Setup React JS application

\n

This tutorial uses a demo app based on the Create React App (CRA) boilerplate. For instructions on how to create a React App, refer to the following docs.

\n

The React Demo Application mentioned here will display the User Profile data if the login process is completed successfully.

\n

After setting up the boilerplate:

\n\n
const config = {\n    APP_NAME: '<<App Name>>',\n    API_KEY: '<<API Key>>',\n  };\n  export default config;
\n
\n

This tutorial uses LoginRadius Auth Page(IDX) for authentication, where Registration and Login functionality is already implemented. For example, you can navigate your Register buttons to https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=<Return URL>.

\n
\n

Add Code to your Application

\n\n
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";\nimport "./App.css";\nimport LandingPage from "./components/LandingPage";\nimport Login from "./components/Login";\nimport Logout from "./components/Logout";\n\nfunction App() {\n  return (\n    <Router>\n      <div className="App">\n        <Switch>\n          <Route exact path="/">\n            <LandingPage />\n          </Route>\n          <Route path="/login">\n            <div style={{ display: "flex", padding: "1em" }}>\n              <Login />\n              <Logout />\n            </div>\n          </Route>\n        </Switch>\n      </div>\n    </Router>\n  );\n}\n\nexport default App;
\n

Add Landing Page

\n

In your components folder under the src folder, create a src/components/LandingPage.js file and add the following code to navigate your Register/Login buttons to the following URL's as shown below.

\n
import React from "react";\nimport config from "../config.js";\nconst LandingPage = () => {\n  return (\n    <div>\n      <h1> React Demo App </h1>\n\n      <a\n        href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=register&return_url=${window.location.origin}/login`}\n      >\n        <button>Register</button>\n      </a>\n\n      <a\n        href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`}\n      >\n        <button>Login</button>\n      </a>\n    </div>\n  );\n};\nexport default LandingPage;
\n

By doing this, we are redirecting our application to the LoginRadius Auth Page and are passing the return_url as the current origin. After successful login, the Login component fetches the user profile data as shown in the following step. However, return_url can also be your website, backend server, etc., where you can handle the access token to perform different actions.

\n

Add Login Component

\n

In your components folder, create a src/components/Login.js file and add the following code to retrieve User Profile Data.

\n
import React from "react";\nimport { withRouter } from "react-router-dom";\nimport config from "../config";\n\nclass Login extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      userProfileResponse: null,\n    };\n  }\n\n  componentDidMount() {\n    const token = new URLSearchParams(this.props.location.search).get("token");\n    if (token) {\n      fetch(\n        "`https://api.loginradius.com/identity/v2/auth/account?apikey=" +`\n          config.API_KEY,\n        {\n          method: "GET",\n          headers: {\n            Authorization: "Bearer " + token,\n          },\n        }\n      )\n        .then((res) => res.json())\n        .then((res) => {\n          this.setState({ userProfileResponse: res });\n        })\n        .catch((e) => {\n          console.log(e);\n        });\n    } else {\n      window.location.assign(\n        `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=login&return_url=${window.location.origin}/login`\n      );\n    }\n  }\n\n  render() {\n    const { userProfileResponse } = this.state;\n\n    return (\n      <div>\n        <span style={{ whiteSpace: "pre-wrap", textAlign: "left" }}>\n          {JSON.stringify(userProfileResponse, null, 4)}\n        </span>\n      </div>\n    );\n  }\n}\n\nexport default withRouter(Login);
\n

The Login component will call the LoginRadius API to fetch the user data by making use of the token obtained upon logging in via the LoginRadius Auth Page.

\n

Add Logout component

\n

In your components folder, create a src/components/Logout.js file and add the code as shown below.

\n
import React from "react";\nimport config from "../config.js";\n\nconst Logout = () => {\n  localStorage.removeItem("token");\n\n  return (\n    <div class="container">\n      <a\n        href={`https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout&return_url=http://localhost:3000/`}\n      >\n        <button>Logout</button>\n      </a>\n    </div>\n  );\n};\nexport default Logout;
\n

This component contains logout functionality. Here, action=logout is passed to the LoginRadius Auth Page, which will log the user out and return them to the Landing Page specified in the return_url.

\n
\n

Full code of the demo can be found on github.

\n
\n

Testing the application

\n

Run the React Application from the command line using npm start. You will be able to see the output on localhost:3000. You can also directly open the IDX page on https://<LoginRadius APP Name>.hub.loginradius.com/auth.aspx?action=register&return_url=http://localhost:3000/login.

\n

Congratulations! You have set up a React Application configured with LoginRadius using LoginRadius CLI. Continue reading to check out some cool and advanced features of the LoginRadius CLI that will help you manipulate and configure the LoginRadius Auth Page for your application through the CLI.

\n

Advanced LoginRadius CLI features

\n

This section explains the use of the LoginRadius CLI in enabling users to quickly and efficiently make changes to the LoginRadius Auth Page configured for their application.

\n

Adding Social Login Methods

\n

We can add social login methods like Google, Facebook, etc., to the LoginRadius Auth Page using the CLI. Use the lr add social command to add a Login method and the lr get social command to view the current active social login methods. Check the image below for a visual representation.

\n

\"alt_text\"

\n

After adding the new login method (in this example, it is Facebook), navigate to the LoginRadius Auth Page by using the lr demo command.

\n

\"alt_text\"

\n

Updating the theme

\n

We can update the theme of the LoginRadius Auth Page using the lr set theme command. You can use the lr get theme command to get a list of all available themes and the currently active theme. See the image below for visual representation.

\n

\"alt_text\"

\n

After changing the theme, navigate to the LoginRadius Auth Page using lr demo command to view the changes.

\n

\"alt_text\"

\n

Adding to the Registration schema

\n
\n

This functionality is only available for paid Developer Plans and above (not available for LoginRadius Free plan).

\n
\n

We can update the Registration Page schema using the lr add schema command. Use the lr get schema command with --active or --all flags to get the current Registration fields or view all available fields with their schemas. You can also configure addtional features by choosing the setup advance configuration option.
\nSee the image below for a visual representation of the command flow.

\n

\"alt_text\"

\n

In the below image 2 fields have been added to the registration schema, Confirm Password and Gender. To view the changes, navigate to the LoginRadius Auth Page using lr democommand.

\n

\"alt_text\"

\n
\n

Instead of using the lr demo command, you can also view the LoginRadius Auth Page by visiting locahost:3000 and following the same workflow as explained earlier.

\n
\n

The entire description for these commands can be found in the LoginRadius CLI Manual.

\n

Contributing to LoginRadius CLI

\n

The LoginRadius CLI is open-sourced under LoginRadius Organization. You are welcome to contribute to it, suggest improvements, or report bugs by following the contributing guidelines. You can also checkout our open source page if you wish to contribute to other opensource projects by LoginRadius.

\n

Your Take

\n

Using the LoginRadius CLI, you can easily setup authentication for your React applications. You can also perform certain LoginRadius functionalities and processes efficiently through the CLI, which saves a bunch of time. LoginRadius will handle all the authentication-related mechanisms so that you can solely concentrate on your application development.

\n

I hope you enjoyed this tutorial and found it to be useful. You can provide feedback or suggestions in the comment section below.

\n

Cheers!!!

\n","frontmatter":{"date":"May 12, 2021","updated_date":null,"description":"In this tutorial, we will learn about implementing authentication for React applications using LoginRadius in under 5 mins. We will be using the LoginRadius CLI, through which we can perform basic actions of the LoginRadius Dashboard on the command line in a fast and proficient manner.","title":"Implement Authentication in React Applications using LoginRadius CLI ","tags":["Authentication","React","CLI","LoginRadius CLI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/588aa544e688ead4b827e6e3fee882fb/58556/cover.webp","srcSet":"/static/588aa544e688ead4b827e6e3fee882fb/61e93/cover.webp 200w,\n/static/588aa544e688ead4b827e6e3fee882fb/1f5c5/cover.webp 400w,\n/static/588aa544e688ead4b827e6e3fee882fb/58556/cover.webp 800w,\n/static/588aa544e688ead4b827e6e3fee882fb/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akash Patil","github":"Akash-Patil","avatar":null}}}},{"node":{"excerpt":"Recoil js is another state management library for React. Though we already have Redux. Mobx, Context, but here we got a new light entry in…","fields":{"slug":"/engineering/recoiling-the-react/"},"html":"

Recoil js is another state management library for React.

\n

Though we already have Redux. Mobx, Context, but here we got a new light entry in the community.

\n

Why I am saying light you will figure it out at the end of this blog.

\n

Why Recoil

\n\n

Recoil concepts

\n

There are two major concepts:

\n
    \n
  1. Atoms
    2. \n
  2. Selectors
    3. \n
\n

Something new? Don't worry will understand this quickly.

\n

Atoms

\n

This is similar to how we use the useState hook in react. If you are new to react hooks, checkout react hooks guide.

\n

e.g.:

\n
 const [age, setAge] = useState(0);
\n

age : this will be used for state variable declaration.\nsetAge :this will be used for state variable updations.

\n

1. Let's start with binding root app with Recoil

\n

Now you need to make a few alterations in your app's root level, like the below snippet.

\n

RecoilRoot will behave like a global context provider that will share the global state to your app tree.

\n

Now update your older code snippet.

\n
ReactDOM.render( <AppPage />, document.getElementById("root"))
\n

to

\n
import { RecoilRoot } from "recoil";\n\nReactDOM.render( \n <RecoilRoot>\n    <AppPage />\n </RecoilRoot>, document.getElementById("root"))
\n

2. Set the Atom

\n

Recoil calls this part as atom, where we set the global key, value.

\n
import { atom } from "recoil";\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});
\n

Now this atom will be accessible throughout the app.

\n

3. use the atom

\n

Now update your older code snippet.

\n
 const [age, setAge] = useState(0);
\n

to

\n
import { useRecoilState } from 'recoil'\nconst [ageState, setAge] = useRecoilState(age);
\n

For a Larger view, here is Full Code

\n
import { atom,useRecoilState } from 'recoil'\n\nconst age = atom({\n  key: "age", \n  default: 0  // default global value for age key\n});\n\nexport const AgeCalculator = () => {\nconst [ageState, setAge] = useRecoilState(age);\n}
\n

Quite easy. Isn't it?\nNow let's move to another part selectors.

\n

Selectors

\n

This is similar to how Redux manages states.

\n

if a value can be derived/computed from the state, then we can skip re initialize of an another separate state key, for that use selectors.

\n

1. set the selectors

\n

In the below example, we are getting isChild value from age key, then we can directly use selector instead of adding a new key or atom.

\n
import {selector} from 'recoil'\n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});
\n

2. use the selectors

\n

Now will use the above-mentioned selector.

\n

below code snippet use age value to isChild.

\n
  const [ageState, setAge] = useRecoilState(age);\n\n  const value = useRecoilValue(isChild);
\n

For a larger view, here is Full Code

\n
import {selector, useRecoilState} from 'recoil' \n\nconst isChild = selector({\n  key: "childage",\n  get: ({ get }) => {\n    const state = get(age);\n    return state < 10 ;\n  }\n});\n\nexport const AgeCalculator = () => {\n    const [ageState, setAge] = useRecoilState(age);\n   const value = useRecoilValue(isChild);\n}
\n

That's all, Milord.

\n

Conclusion

\n

I hope you got why I am saying this as light.

\n

Recoil is looking relatively easy, promising, and early-stage, but again this is the next generation, and it will take time to get the own space in the community.

\n","frontmatter":{"date":"April 30, 2021","updated_date":null,"description":"Recoil is an experimental state management library and It provides several capabilities that are difficult to achieve with React alone.In this article we learn about the recoil.js, and how it is managing state in react.","title":"What is recoil.js and how it is managing in react?","tags":["JavaScript","React","Recoil"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/208ac01a1815902a049ffe0d62ef3730/58556/react.webp","srcSet":"/static/208ac01a1815902a049ffe0d62ef3730/61e93/react.webp 200w,\n/static/208ac01a1815902a049ffe0d62ef3730/1f5c5/react.webp 400w,\n/static/208ac01a1815902a049ffe0d62ef3730/58556/react.webp 800w,\n/static/208ac01a1815902a049ffe0d62ef3730/99238/react.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"Introduction As we all know that Enums are very commonly used in the C# program. While using the Enums, we should also be aware of how the…","fields":{"slug":"/engineering/how-enum-tryparse-works-in-csharp/"},"html":"

Introduction

\n

As we all know that Enums are very commonly used in the C# program. While using the Enums, we should also be aware of how the values are parsed into the Enums. In my earlier article, I have talked about the How to Use Enum in C#.In this article, I will specifically talk about the mistake we can make while using the Enum.TryParse() method.

\n

Let's get started

\n

As we know Enum.Tryparse() method will give us the parsed Enum. Like in the below example

\n
public enum IdentityProtocols\n{\n    SAML,\n    OAuth,\n    OpenID\n}\nvar isEnumParsed=Enum.TryParse("0", true, out IdentityProtocols parsedEnumValue);\nConsole.WriteLine(isEnumParsed?parsedEnumValue.ToString():"Not Parsed");
\n

The above code will print the SAML because the enum is started by default with the value 0.

\n

What happens if we run the below code with the same Enum declaration?

\n
var isEnumParsed=Enum.TryParse("-1", true, out IdentityProtocols parsedEnumValue);\nConsole.WriteLine(isEnumParsed?parsedEnumValue.ToString():"Not Parsed");
\n

As per our understanding isEnumParsed variable should be false, and the above code should print Not Parsed as the value which we are passing in the method is not in the Enum declaration, right?

\n

But here is a catch, isEnumParsed variable have the true value, and the code will print -1.

\n

Why Enum.tryParse() parse int values?

\n

The default type of Enum in C# is int. That's why any valid integer values are parsed by the Enum.TryParse() method irrespective of those integer values are defined in the Enum or not.

\n

We can define the Enum with types like byte, sbyte, etc. Then the Enum.TryParse() will parse those values which will fall in that defined Enum type.

\n

How to overcome this behavior of Enum.TryParse()

\n

To overcome this behavior of Enum.TryParse() we can follow the below approaches.

\n

1. Using Enum.IsDefined() method with Enum.TryParse() method

\n
var isValidEnum = Enum.TryParse("-1", true, out IdentityProtocols parsedEnumValue) && Enum.IsDefined(typeof(IdentityProtocols), parsedEnumValue);\nConsole.WriteLine(isValidEnum ? parsedEnumValue.ToString(): "Not Parsed");
\n

In the above code Enum.IsDefined() will check that the value which we are getting from the Enum.TryParse() method is defined in the Enum declaration or not.

\n

That will give us the proper result, and the above code will print Not Parsed

\n

2.Using Enum.GetNames() method

\n
var value = "-1";\nvar identityProtocolsList = Enum.GetNames(typeof(IdentityProtocols)).ToList();\nConsole.WriteLine(identityProtocolsList.Contains(value) ? value : "Not Parsed");
\n

In this code, checking that value is present or not by getting all the Names from the enum declaration by using Enum.GetNames() method.

\n

This code will print Not Parsed

\n

Note: Here, we will not be able to parse any of the integer values. It will only check the values which are defined in the Enum declaration.

\n

Conclusion

\n

In this article, We have discussed the mistake we can make using the Enum.TryParse() method. This mistake can hurt and can abnormally terminate our program/application. We can use the ways I have mentioned in this article to overcome so that our program/application can run smoothly.

\n","frontmatter":{"date":"April 28, 2021","updated_date":null,"description":"In this article, I will talk about how Enum.TryParse() works in C# and mistake which we can make while using it.","title":"How Enum.TryParse() works in C#","tags":["C#","Enum"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/2df70abcd200dccf1e018d7875c31a92/58556/coverimage.webp","srcSet":"/static/2df70abcd200dccf1e018d7875c31a92/61e93/coverimage.webp 200w,\n/static/2df70abcd200dccf1e018d7875c31a92/1f5c5/coverimage.webp 400w,\n/static/2df70abcd200dccf1e018d7875c31a92/58556/coverimage.webp 800w,\n/static/2df70abcd200dccf1e018d7875c31a92/99238/coverimage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"In this article, We will discuss the manipulation of DOM elements with Ref directly with React. React Framework builds your components and…","fields":{"slug":"/engineering/react-with-refs/"},"html":"

In this article, We will discuss the manipulation of DOM elements with Ref directly with React.

\n

React Framework builds your components and abstracts your code away from manipulation within the DOM but still leaves the door open for developers to access it. Reason are few cases where it might be necessary. That's why React provides an escape hatch know as refs.

\n

Refs are a function that use to access the DOM from components. You only need to attach a ref to the element in your application to provide access to it from anywhere within your component without making use of props and all.

\n

We can also use Refs to direct access to React elements and use callbacks with them.

\n

We should only use refs when the required interaction cannot be achieved using state and props.

\n

Use Refs

\n

We can use refs to do anything that needs to be manipulated in the DOM. Some good cases like focus, test selection, media playback, triggering mandatory animations, or integration with the third-party DOM library.

\n

Note: We should avoid using refs because it removes the purpose of using React. For example, If you want to show and hide a \tpopup component. We should use a boolean prop for it instead of manipulating dom.\n

\n

Creating Refs

\n

We can use React.createRef()method to create Refs, and then we can attach to a Dom element via the ref attribute after that, we can access and modify that element through the ref.

\n
class App extends React.Component {\n  constructor(props) {  \n    super(props);  \n    this.myRef = React.createRef();\n  }\n  render() {\n    return <div ref={this.myRef} />; \n  }\n}
\n

In above code, We created this.myRef in the constructor by calling React.createRef() method.

\n

Then in the render method , we attached the returned value to ref of the div element, a reference to the node becomes accessible at the current attribute of the ref.

\n

We should not use ref attribute on function components because they do not have instances.

\n

React will assign the current property with Dom element when component mount and assign null to it when component unmount.

\n

ref updates happen before componentDidMount or componentDidUpdate methods.

\n

We can pass refs as props to the component. Example:

\n
function MyCustomTextInput ({ myInputRef }) {  \n  return <input ref={myInputRef} />;  \n}\n\nclass App extends React.Component {  \n  constructor(props) {  \n    super(props);  \n    this.myInputRef = React.createRef();  \n  } \n  \n  componentDidMount() {  \n    this.myInputRef.current.focus();  \n  }\n  \n  render() {  \n    return <MyCustomTextInput inputRef={this.myInputRef} />;  \n  }\n}
\n

In above code, App passed its ref as props to MyCustomTextInput component.

\n

Callback Refs

\n

We can create ref using another way called callback refs; it gives us more fine-grain control over when refs are set and unset within the component.

\n

Instead of passing ref returned by createRef() method, we will pass a function to ref attribute.\nThe function receives React component instance or DOM element, which can be stored and accessed anywhere.

\n
class App extends React.Component {  \n  componentDidMount() {  \n    this.input.focus();  \n  } \n  \n  render() {  \n    return (    \n        <input ref={element => (this.input = element)} />;   \n    );  \n  }  \n}
\n

In the above code, React will call the ref callback t store the reference of the input element when the component mounts; then, it will focus the input element automatically and when the component unmounts, call it with null.

\n

We can pass callback refs between components . Example:

\n
function MyCustomTextInput({ inputRef }) {  \n  return <input ref={inputRef} />;  \n}\n\nclass App extends React.Component {  \n  componentDidMount() {  \n    this.myInputElement.focus();  \n  } \n  render() {  \n    return <MyCustomTextInput inputRef={el => (this.myInputElement = el)} />;  \n  } \n}
\n

In the above code, We passed the function to inputRef and access it in App component so we can call focus on it to focus the input element.

\n

Caveats with callback refs

\n

Callback refs are calling two times during updates if they are defined as an inline function. This is because a new instance of the function is created with each render. We can avoid this by calling it a method of a class.

\n

To understand more about React refs. Read Refs and the DOM

\n","frontmatter":{"date":"April 16, 2021","updated_date":null,"description":"Learn about manipulation of DOM elements with Ref directly with React","title":"React with Ref","tags":["React","Refs","DOM"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/bb23ef2271007fb39da78689002e8d3b/58556/title-image.webp","srcSet":"/static/bb23ef2271007fb39da78689002e8d3b/61e93/title-image.webp 200w,\n/static/bb23ef2271007fb39da78689002e8d3b/1f5c5/title-image.webp 400w,\n/static/bb23ef2271007fb39da78689002e8d3b/58556/title-image.webp 800w,\n/static/bb23ef2271007fb39da78689002e8d3b/99238/title-image.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius. Configuring…","fields":{"slug":"/engineering/implementing-authentication-in-angular-2-plus-with-loginradius-cli/"},"html":"

Hello Guys!!!, today we will be implemented the authentication in the Angular 2+ application within 5 mins using LoginRadius.

\n

Configuring LoginRadius

\n

To implement authentication in the angular app first let's start with registering in the Loginradius and creating the application using LoginRadius CLI.

\n

Why LoginRadius CLI

\n

Developer Experience plays a crucial role for us. We always think about the ways we can minimize the juggling between a quickstart tutorial, dashboard, and terminal. The LoginRadius CLI will simplify your flow by just using some simple commands to register, create an application, log in, etc., and enables you to get the job done in very little time without leaving the terminal.

\n

LoginRadius CLI Setup

\n

Mac or Linux

\n\n

Other Platforms

\n\n

After installing the CLI, you can register into the LoginRadius via the below command.

\n
$ lr register
\n

This command will open the Loginradius in the browser to register yourself and create the app.

\n

\"Register

\n

Once you successfully register you will be able to see the below message on the browser, you can close the tab and come back to the CLI.

\n
You are Successfully Authenticated, Kindly Close this browser window and go back to CLI.
\n

Get Your Application API Credentials

\n

Once you login/register using the CLI, You can now run the lr get config command to get your API credentials.

\n

\"LoginRadius

\n

Configuring Callback URLs

\n

A callback URL is a URL in your application where LoginRadius redirects the user after they have authenticated. The callback URL for your app must be added to your Application Configuration. If this field is not set, users will be unable to log in to the application and get an error.

\n

\"Whitelist

\n

To get the list of whitelisted domains, you can run lr get domain command from the cmd prompt. And to add a domain in the list using lr add domain command.

\n
\n

If you are following this tutorial, you should set the http://localhost as a whitelisted domain. Check the below image for how to add the domain using LoginRadius CLI.

\n
\n

\"LoginRadius

\n

Setup Angular application

\n

You can implement the LoginRadius authentication in your existing Angular application, or you can start from scratch by following this tutorial.

\n
\n

You need to enable the routing for this tutorial if you are not aware of how to enable routing in the angular application, kindly follow this tutorial

\n
\n\n

Add Login to Your Application

\n

If you have already created the login component, add the following code in the .ts file else, generate the login component using ng CLI ng generate component login. Which will create a component inside the app folder. Add the following code to the login.component.ts

\n
import { Component, OnInit } from '@angular/core';\n\nimport { ActivatedRoute, Router } from '@angular/router';\n\nimport config from '../config';\n\n@Component({\n  selector: 'app-login',\n  templateUrl: './login.component.html',\n  styleUrls: ['./login.component.scss'],\n})\nexport class LoginComponent implements OnInit {\n  constructor(private route: ActivatedRoute, private router: Router) {\n    this.route.queryParams.subscribe((params) => {\n      if (params.token || localStorage.getItem('token')) {\n        localStorage.setItem('token', params.token);\n        this.router.navigate(['/profile']);\n      } else {\n        window.location.href = `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?return_url=${window.location.origin}/login`;\n      }\n    });\n  }\n\n  ngOnInit(): void {}\n}
\n

Here we are redirecting the application to the LoginRadius Auth Page where we are passing the return_url as the current origin, so after successful login, the LoginRadius Auth Page will redirect to the angular application with token as a query param. Later we will use token for all the user-related actions.

\n

Add Profile Page

\n

As you have seen in the above code on successful login, we redirect to /profile page. So let us create a profile component using ng CLI ng generate component profile.\nAnd let's modify the profile.component.ts file in the app/profile folder generated by ng CLI.

\n
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\nimport config from '../config';\nimport { ProfileService } from '../profile.service';\nimport { Profile } from './profile';\n\n@Component({\n  selector: 'app-profile',\n  templateUrl: './profile.component.html',\n  styleUrls: ['./profile.component.scss'],\n})\nexport class ProfileComponent implements OnInit {\n  profile: Profile;\n  loginRadius: any;\n\n  constructor(private configService: ProfileService, private router: Router) {\n    const token = localStorage.getItem('token');\n  }\n\n  ngOnInit(): void {\n    this.configService.getProfile().subscribe(\n      (data: Profile) => {\n        this.profile = { ...data };\n      },\n      (err: any) => {\n        if (err.status === 403) {\n          localStorage.removeItem('token');\n          this.router.navigate(['login']);\n        }\n      }\n    );\n  }\n\n  logout() {\n    localStorage.removeItem('token');\n    window.location.href = `https://${config.APP_NAME}.hub.loginradius.com/auth.aspx?action=logout`;\n  }\n}
\n

Similary add the below code to profile.component.html file.

\n
<div class="container">\n  <h1>Hello {{ profile?.Email[0]?.Value }}</h1>\n  <button (click)="logout()">LogOut</button>\n</div>
\n

The profile component will call the LoginRadius API to fetch the profile details and store them in the profile variable. Using that profile, we are displaying the email in the HTML.\nIt also has the logout() function where we pass the action=logout in the LoginRadius Auth Page, which will help us log out the user.

\n

In the profile component, you can see the two things are used.

\n\n

You can generate the service in the angular using ng CLI by using this command ng generate service profile which will create profile.service.ts with required configuration. Add the below code in the profile.service.ts file.

\n
import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport config from './config';\nimport { Profile } from './profile/profile';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ProfileService {\n\n  constructor(private http: HttpClient) {}\n\n  getProfile() {\n    // now returns an Observable of Config\n    return this.http.get<Profile>(\n      `https://api.loginradius.com/identity/v2/auth/account?access_token=${localStorage.getItem(\n        'token'\n      )}&apikey=${config.API_KEY}`\n    );\n  }\n}
\n

We will use the HTTP module to call the Rest API so let's add the HttpClientModule in the app.module.ts file.

\n
import { HttpClientModule } from '@angular/common/http';\n...\n\n@NgModule({\n  imports: [\n    ...\n    HttpClientModule\n    ...\n  ],\n})\nexport class AppModule { }
\n

Now let's create a Profile model which will be used for storing the user profile.

\n\n

Add Routes for Login and profile.

\n

Lets modify the app-routing.module.ts and add the below Routes in it.

\n
import { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { AppComponent } from './app.component';\nimport { LoginComponent } from './login/login.component';\nimport { ProfileComponent } from './profile/profile.component';\n\nconst routes: Routes = [\n  {\n    path: 'login',\n    component: LoginComponent\n  },\n  { path: 'profile',\n    component: ProfileComponent\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }
\n

Finally, to gather all, we need to modify the app.component.ts and add the routing logic.

\n
import { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n  constructor(private router: Router) {}\n\n  ngOnInit() {\n    if (window.location.pathname === "/") {\n      if (localStorage.getItem('token')) {\n        this.router.navigate(['/profile']);\n      } else {\n        this.router.navigate(['/login']);\n      }\n    }\n  }\n}
\n

And add the router-outlet to the app.component.html file.

\n
<router-outlet></router-outlet>
\n
\n

You can find the full code in github

\n
\n

Testing the application

\n

Run ng serve to start the local server, and you will be able to see the output on locahost:4200.

\n

Adding Login Methods

\n

You can configure the LoginRadius Auth Page by adding social login methods like Facebook, Google, etc. To add the login method, you can use the command lr get social and lr add social command. Check the below image on how to add the social configuration.

\n

\"Added

\n

After adding, visit the LoginRadius Auth Page either by visiting locahost:4200 and log out. Or using the command lr demo. You will find the new login method added.

\n

\"Added

\n

Customizing theme for LoginRadius Auth Page

\n

LoginRadius Dashboard Support three pre-defined themes for you. You can check out the Theme Customization section in the LoginRadius Dashboard for all the customization options available.

\n

\"Theme

\n

You can also get/set your current theme using LoginRadius CLI by using the commands like lr get theme and lr set theme.

\n

\"Theme

\n

Adding/Updating Registeration Schema for LoginRadius Auth Page

\n

LoginRadius Auth Page supports 3 predefined fields for LoginRadius Auth Page i.e Email, Password, Confirm Password. With the help of LoginRadius CLI, you can manage the registration schema for your LoginRadius Auth Page.

\n

Check out the below commands to add the new registration field in your LoginRadius Application. After adding the new schema field you can always check your LoginRadius Auth Page by running lr demo command from the terminal.

\n

\"Registration

\n

LoginRadius Site Management

\n

LoginRadius Dashboard provides a feature where you can create and manage multiple applications for your multiple products.

\n

With the help of LoginRadius CLI you can manage your sites via terminal using commands like lr get site, lr set site, lr add site, lr delete site.

\n

\"Site

\n

Contributing to LoginRadius CLI

\n

The LoginRadius CLI is opensourced in the LoginRadius Organization and you can contribute to it if you find any bugs or improvement by following the contributing guidelines. You can also checkout our open source page if you wish to contribute more in LoginRadius.

\n

Your Take

\n

With the help of LoginRadius CLI, you can setup the authentication for your Angular application in just 5 minutes. LoginRadius will take care of all the authentication-related stuff for your application so that you can focus on your application development.

\n

I hope you like this tutorial. Kindly provide feedback suggestions in the comment section below.

\n

Cheers!!!

\n","frontmatter":{"date":"April 14, 2021","updated_date":null,"description":"In this tutorial, you will learn about how to implement the authentication for Angular 2+ application in just 5 mins. We will be using LoginRadius for authentication.","title":"Implement Authentication in Angular 2+ application using LoginRadius CLI in 5 mins","tags":["Authentication","Angular","CLI","LoginRadius CLI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ab2ba564a1fcea45551f36b77f132cde/58556/angulat_demo_auth.webp","srcSet":"/static/ab2ba564a1fcea45551f36b77f132cde/61e93/angulat_demo_auth.webp 200w,\n/static/ab2ba564a1fcea45551f36b77f132cde/1f5c5/angulat_demo_auth.webp 400w,\n/static/ab2ba564a1fcea45551f36b77f132cde/58556/angulat_demo_auth.webp 800w,\n/static/ab2ba564a1fcea45551f36b77f132cde/99238/angulat_demo_auth.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"How Git Local Repository Works Let's understand how git set up a local repository\nOnce we initialize or clone any git project that will set…","fields":{"slug":"/engineering/how-git-local-repository-works/"},"html":"

How Git Local Repository Works

\n

Let's understand how git set up a local repository\nOnce we initialize or clone any git project that will set up a local project environment.

\n

that whole environment will look like the below picture

\n

\"git-local-environment\"

\n

Project Folder: The main folder consists of a workspace and local repository

\n

Work Directory: Inside Project Folder where we actually work,  we keep all files and perform many operations like addition, update, deletion of files

\n

Local Repository: Here we don't actually change anything, this is handled automatically by git. this consists staging area, commit history, stash area etc.

\n

Let's get into it step by step and see how we perform command or action and behind the scene, git do its own activity.

\n\n

Hope this makes clear how git handling things at the local repository.

\n
\n

Note: Click here to learn how you can automate your Git workflows with Hooks

\n
\n","frontmatter":{"date":"April 12, 2021","updated_date":null,"description":"In this article, I will talk about how Git Local Repository Works","title":"How Git Local Repository Works","tags":["GIT"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4fd42535cde3fddc0451ae0d89c15a26/58556/git.webp","srcSet":"/static/4fd42535cde3fddc0451ae0d89c15a26/61e93/git.webp 200w,\n/static/4fd42535cde3fddc0451ae0d89c15a26/1f5c5/git.webp 400w,\n/static/4fd42535cde3fddc0451ae0d89c15a26/58556/git.webp 800w,\n/static/4fd42535cde3fddc0451ae0d89c15a26/99238/git.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":66,"currentPage":12,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}