![\"Example](\"/a0ae6207fefc74ee8f42e98d08082ff6/image1.webp\")
It is fine when you and the rest of your team are working on different files. But sometimes, multiple people simultaneously work on the same files, and that's where the problems arise.
\nJust a Note: git pull = git fetch + git merge
In this scenario, when you have local changes in your system and you pull the latest contribution, you got this error.
\nerror: your local changes to the following files would be overwritten by merge: readme.md\nplease commit your changes or stash them before you merge.\nAborting...
git stash (stash the local changes clean the workspace)\ngit pull (pull the latest changes from remote )\ngit stash apply (apply the latest stash)
-----------(or)---------------
\ngit fetch (fetch the local machine folder)\ngit stash (stash the local changes clean the workspace)\ngit merge '@{u}' (merge the changes from local folder to workspace folder)\ngit stash pop (apply the latest stash )
By default, the stash changes will become staged. If you want to unstage them, use git restore --staged (git ver > 2.25.0).
git reset --hard HEAD (reset to the head means remove all local changes)\ngit pull (get the latest changes)
-----------(or)---------------
\ngit fetch (fetch the local machine folder)\ngit reset --hard HEAD (reset to the head means remove all local changes)\ngit merge '@{u}' (merge the changes from the local folder to workspace folder)
Now you must be thinking, what is git pull --force then?
it feels like it would help to overwrite local changes. instead, it fetches forcefully but does not merge forcefully (git pull --force = git fetch --force + git merge).
Like git push, git fetch allows us to specify which local and remote branch we want to work on. git fetch origin/ft-1:my-ft means the changes in the ft-1 branch from the remote repository will end up visible on the local branch my-ft. When such kind of operation modifies the existing history, it is not allowed by the Git without an explicit --force parameter.
In this blog, I will show you how to create a NodeJS server using core http module. We will create a simple server that will serve static assets and a simple API to return some JSON data.
\nIn the process, you will also learn about the request and response objects provided by NodeJS, which are used by every other framework built on top of NodeJS like ExpressJS etc.
\nWith that in mind, let's begin.
\nCreate a folder by any name and initialize a node project in it using npm init -y
package.json file in your directory.server.js in your directory.public at the root of your project.Add a file named index.html with the following content\nindex.html
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Demo</title>\n</head>\n<body>\n <h1>Coming from the Root </h1>\n</body>\n</html>Now we will create a node server that will serve our index.html file when a request is sent to /.
server.js
const http = require('http');\n const path = require('path');\n const fs = require('fs');\n const PORT = 3000;\n const hostname = 'localhost';\n\n // createServer is the http method used to create a web server that takes a callback.\n const server = http.createServer(serverHandler);\n\n // callback function definition\n function serverHandler(req, res) => {\n if(req.method === 'GET' && req.url === '/') {\n let filePath = path.resolve(__dirname, 'public/index.html')\n let fileExists = fs.existsSync(filePath);\n if (!fileExists) {\n res.statusCode = 404;\n res.setHeader('Content-Type', 'text/html');\n res.end(`\n <html>\n <body>\n <h3>Page not found</h3>\n </body>\n </html>`)\n } else {\n res.statusCode = 200;\n res.setHeader('Content-Type', 'text/html');\n fs.createReadStream(filePath).pipe(res);\n }\n }\n }\n\n server.listen(PORT, hostname, () => {\n console.log(`Server running at ${hostname}:${PORT}`); \n })Let's understand what just happened in the above code snippet:
\ncreateServer method provided by node http module. createServer takes a callback which will be called when there is an incoming request with req and res parameters.serverHandler, we have used an if block to check if the incoming request is a GET request and the request url is / then code inside if statement will be executed.index.html which we want to serve exists or not in our public directory using existsSync, which synchronously checks for the file at the given path and returns true if the file exists.createReadStream method from fs module and pipe it into res object which sends it to the browser.server.listen to start our server on the PORT 3000.Now it's time to test our server. Run node server.js at the root of the project, and you will see the server running on PORT 3000.\nOpen your browser and enter localhost:3000 in the address bar, and you will get the HTML response.
Now we will expand our callback, which we passed to createServer to handle one more GET request at /notes, which will return an array of notes to the browser.
Update the serverHandler function with the following code snippet in your server.js file
server.js
...\n function serverHandler(req, res) {\n if(req.method === 'GET' && req.url === '/') {\n let filePath = path.resolve(__dirname, 'public/index.html')\n let fileExists = fs.existsSync(filePath);\n if (!fileExists) {\n res.statusCode = 404;\n res.setHeader('Content-Type', 'text/html');\n res.end(`\n <html>\n <body>\n <h3>Page not found</h3>\n </body>\n </html>`)\n } else {\n res.statusCode = 200;\n res.setHeader('Content-Type', 'text/html');\n fs.createReadStream(filePath).pipe(res);\n }\n }\n // Newly added code \n if (req.method === 'GET' && req.url === "/notes") {\n const notes = [\n {\n id: 1,\n title: "Demo Note"\n },\n {\n id: 2,\n title: "Another Note"\n }\n ]\n\n res.statusCode = 200;\n res.setHeader('Content-Type', 'application/json');\n res.end(JSON.stringify(notes));\n } else {\n res.setHeader('Content-Type', 'application/json')\n res.end(JSON.stringify({message: `${req.method} is not supported for ${req.url}`}))\n } \n }\n ...if statement to handle the request coming at /notes .application/json for the browser to process it accordingly.With that, we have created a simple node server to serve static content as well a simple API to return JSON data.
\nWe saw how we had to handle each request with its method and the URL. With an increasing number of routes, such things become hard to manage as we will have to add multiple if statements. And that's why frameworks like ExpressJS, HapiJS exist, which makes creating servers in NodeJS very easy. But it's important to know what happens under the hood as there is no magic happening in those frameworks.
\nThe complete code for this blog can be found at Github Repo.
\n","frontmatter":{"date":"November 27, 2020","updated_date":null,"description":"Let us understand the core http module in NodeJS, which is the basic building block of frameworks like ExpressJS etc.","title":"NodeJS Server using Core HTTP Module","tags":["NodeJs","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8d8c41d9ba7fce1f1b5c6d72e0982463/58556/coverImage.webp","srcSet":"/static/8d8c41d9ba7fce1f1b5c6d72e0982463/61e93/coverImage.webp 200w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/1f5c5/coverImage.webp 400w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/58556/coverImage.webp 800w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"excerpt":"How does bitwise ^ (XOR) work? XOR is a bitwise operator, and it stands for \"exclusive or.\" It performs logical operation. If input bits are…","fields":{"slug":"/engineering/how-does-bitwise-xor-work/"},"html":"XOR is a bitwise operator, and it stands for \"exclusive or.\" It performs logical operation. If input bits are the same, then the output will be false(0) else true(1).
\nXOR table:
\n| X | \nY | \nX^Y | \n
|---|---|---|
| 0 | \n0 | \n0 | \n
| 0 | \n1 | \n1 | \n
| 1 | \n0 | \n1 | \n
| 1 | \n1 | \n0 | \n
Example: 4^3 = 7
In binary: \n\t 0100\n\t ^ 0011\n\t ------\n Result: 0111 => (7)Let's understand with an example -4^-2 = 2\nIn the above example, we can see -4^-2output will be 2\nbut the question arises how? Because if we represent both inputs in the binary form, then we do XOR of bits, then the output will be 0000 0110 and in decimal, it will be 6 but as we know output should be 2.
1000 0100 (-4)\n^ 1000 0010 (-2)\n------------------\n 0000 0110 => (6) // incorrect output\n\nNote: Here, the leftmost bit position is reserved for the sign of the\nvalue (positive or negative) and doesn't contribute towards the value of the number.
\n
Let's understand how the XOR operation works with negative numbers.
\nFirst, the XOR operation is to XOR each bit (the same is 0, the difference is 1), but you need to convert the number into a complement first.
\nThe complement of the negative number is reversed for each bit and then incremented by 1 (the highest is kept at 1)
\n// Lets take -4\nIn binary: \t\t\t1000 0100\nReverse: \t\t\t1111 1011\ncomplement (Increment by 1): \t1111 1100// Now -2\nIn binary: \t\t\t1000 0010\nReverse: \t\t\t1111 1101\ncomplement (Increment by 1): \t1111 1110
\nFinal result:
\ncomplement of -4 : 1111 1100\ncomplement of -2 : 1111 1110\n -----------\nResult: 0000 0010 \t=> 2Here, the MSB bit of result will denote the sign, and the rest of the bits will denote the value of the final result.\nXOR sign table could be useful to understand the sign of result:
\n| X | \nY | \nX^Y | \n
|---|---|---|
| + | \n+ | \n+ | \n
| + | \n- | \n- | \n
| - | \n+ | \n- | \n
| - | \n- | \n+ | \n
The above approach will work with negative inputs, but if we have positive and negative, then?
\nLet's performs -5 ^ 2\nFollow the same above approach to get a complement code of -5.
complement of -5 : 1111 1011\n// Note: complement of a positive number is itself\ncomplement of 2 : 0000 0010 \ncomplement result: 1111 1001\n\nNow, complement result -1 : 1111 1000\n -----------\nFinal result(inverse code): 1000 0111 => -7Swap two number without the third variable\nExample:
\nfunction swapWithXOR (a, b) {\n a = a^b;\n b = a^b;\n a=a^b;\n console.log("result => a: " + a + ", b: " + b)\n}\n\nswapWithXOR(4, 1); // result => a: 1, b: 4Redux Saga is a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously. This includes making HTTP requests to external services, accessing browser storage, and executing I/O operations. These operations are also known as side effects. Redux Saga helps to organize these side effects in a way that is easier to manage.
\nA redux store natively only knows how to dispatch actions and update its state using its root reducer. Actions represent an event describing something happening in your application and an intention to change your application's state. A reducer accumulates values from or stemming from dispatched actions and accumulates these values into the newly updated state of your application.
\nReducers must be written as a pure function, as it is necessary to enable useful features of Redux such as time travel (replaying past actions). Actions are simply objects passed on into the reducer and are naturally deterministic. Thus we have a problem; there isn't any place in your Redux application to put your side effects in.
\nA Redux middleware lies between an action and a reducer. This enables actions to contain something else other than a plain object, as long as the middleware intercepts this, performs its logic, and returns a plain object to pass along to the reducer.
\nRedux Thunk, a common alternative to Redux Saga, allows functions to be passed into the Redux store dispatch, which checks to see if it is a function or an action object, executing the function in the former case, and directly passing along the action object to the reducer in the latter case. These functions can then perform whatever complex asynchronous logic that it wants and produce a plain action object to be then passed into the reducer.
\nRedux Sagas are slightly different in that a separate set of actions are defined in your Redux application, which is captured exclusively by watcher functions (as part of your saga). Upon capturing the action, the saga will execute the corresponding logic and dispatch a resultant action to your application's reducer. The saga essentially acts as a separate thread to your application, listening for specific actions from your main application to perform complex asynchronous tasks and updating your application's state once it is completed.
\nWhile I wouldn't say Redux Saga is inherently better than any of the alternatives available, it does have a few benefits that might make you want to consider using it.
\nRedux Saga offers a place completely decoupled from your action creators for you to handle your application's side effects. Some people may feel that this makes your application's data flow harder to follow (which I would agree with), but I think that this decoupling makes organizing your codebase and extending functionality easier down the road.
\nFor example, in a situation where you might need to support a workflow that requires multiple HTTP requests to different services in a particular order, Redux Saga allows you to compose granular sagas into a single one and represent this new high-level function with a separate action. Your application can still access each individual HTTP resource in other workflows, but for this particular one, your React component can simply call this high-level action to load whatever it needs from a single place. As far as your component is concerned, your asynchronous logic to load multiple resources in a particular order is abstracted away.
\nRedux Saga also offers us a collection of helper functions that are used to spawn your tasks when some specific actions are dispatched. These can be used to help organize when and how your tasks are executed.
\nFor example, one of the most commonly used helper functions is takeEvery(). This instructs the middleware to spawn a new task for every action dispatched to your store matching a given pattern. This provides a behaviour similar to Redux Thunk and is as simple as it gets: \"Application tells you to fetch something, go fetch it\".
Now imagine that you had two functionally independent components that needed to retrieve the most up to date data from the same place. Previously they existed on two different pages and could both be visited at any time. It would make sense for both components to try to retrieve a fresh copy of the resource whenever it is visited. Now imagine that your specification has changed, and now the two components need to exist on the same page. Now you have a situation where two different components are redundantly spawning the same task.
\nObviously, you could rewrite one of the components to no longer try to retrieve a fresh copy and rely on the other to create the necessary action to retrieve this resource and populate the application store. Or you could add some logic to ensure that your component does not try to create a new action to retrieve this resource if this resource is already being loaded. But this could also be solved using another Redux Saga helper function: take(). This function instructs the middleware to spawn a new task for an action dispatched matching a given pattern but will effectively ignore any new actions until the spawned task has been completed.
With this, your two independent components can coexist together without changing any component-specific logic! As far as your component is concerned, it asks your saga to retrieve a resource on its behalf and retrieves it from the resultant updated state. Your saga gets to decide how it wants to handle two requests from different components.
\nThere is a fair bit more to Redux Saga than I managed to cram into this post. If you're interested in incorporating it into your project or want to know more, check out their fantastic documentation here: Redux-saga. It's packed full of useful examples if you'd like to get into the low-level details.
\nRedux Saga is one of many tools that can help you handle your application's side effects. It's heavy and has a learning curve but contains a lot of functionality that will help keep your codebase neat and modular.
\n","frontmatter":{"date":"November 23, 2020","updated_date":null,"description":"A high level introduction to Redux Saga.","title":"Introduction to Redux Saga","tags":["React","Redux","Redux Saga"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4fec246c146752a9eaa62241dbbe219f/58556/unsplash.webp","srcSet":"/static/4fec246c146752a9eaa62241dbbe219f/61e93/unsplash.webp 200w,\n/static/4fec246c146752a9eaa62241dbbe219f/1f5c5/unsplash.webp 400w,\n/static/4fec246c146752a9eaa62241dbbe219f/58556/unsplash.webp 800w,\n/static/4fec246c146752a9eaa62241dbbe219f/99238/unsplash.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"excerpt":"React thrives on being one of the premier tools to build single-page applications, which used to be a fairly foreign concept when I started…","fields":{"slug":"/engineering/react-router-basics/"},"html":"React thrives on being one of the premier tools to build single-page applications, which used to be a fairly foreign concept when I started building my first React app. Back then, I was used to the concept of serving separate web pages whenever the user redirects from an URL path to another, and it was rather challenging at first to wrap my head around how React handles navigation.
\nWith that in mind, this blog post aims to lay down and explain the basic aspects of navigation using React Router, one of the most, if not the most, popular solutions for navigation within a React app.
\nThroughout the first section below, please reference this CodePen example.
\nAs hinted at in the preface of this writing, routing in React does not involve replacing the HTML, CSS or JavaScript resources currently being served or reloading the browser content. Instead, using libraries like react-router allows containers to be swapped in and out dynamically based on the current URL location, and this all happens client-side. With that in mind, React Router can more generally be understood as a wrapper that handles conditional rendering based on URL path.
To accomplish this, the basic building blocks that developers get to play with are <Route>, <Switch> and <Link>. Let us look at a basic example making use of these 3 components:
First off, let’s create some simple text components. These components are stand-ins for actual components to be swapped in and out in navigation. HelloBanner will be a div containing the simple message “Hello”, and WorldBanner containing “World!”:
\nconst HelloBanner: React.FunctionComponent = () => {\n return (\n <div id="banner_hello" className="banner">\n <span>Hello Banner is currently displayed. We are currently in path "/hello"</span>\n </div>\n ) \n}\n\nconst WorldBanner: React.FunctionComponent = () => {\n return (\n <div id="banner_world" className="banner">\n <span>Hello Banner is currently displayed. We are currently in path "/world"</span>\n </div>\n ) \n}Now let’s imagine the layout of a conventional web application with a top navigation bar. The navigation bar contains links to each section of the app and the body would show the content of the current webpage. The skeleton code for that container would look something like this in React:
\nclass AppContainer extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n <div id="div_app_container" className="app-container">\n <div id="div_nav" className="nav-bar">\n <span>Navigation bar</span>\n <Link to="/hello">\n <span>Link to /hello</span>\n </Link>\n <Link to="/world">\n <span>Link to /world</span>\n </Link>\n <Link to="/clearlyinvalidpath">\n <span>Link to a clearly invalid path.</span>\n </Link>\n </div>\n <div id="main_container" className="main-container">\n <span>Main Container</span>\n <Switch>\n <Route exact path="/">\n <div>\n <span>\n Default container. We are in root path\n </span>\n </div>\n </Route>\n <Route path="/hello" component={HelloBanner} />\n <Route path="/world">\n <WorldBanner />\n </Route>\n <Redirect to="/" />\n </Switch>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <BrowserRouter>\n <AppContainer />\n </BrowserRouter>,\n document.getElementById("app")\n);If you are currently looking at the render of this structure from the CodePen, you would see this very simple UI:
\n
Clicking on the <Link>’s in the navigation bar will “navigate” you to the corresponding paths. In effect, what this does is twofold:
<Route> components to rerender according to the current path.This is demonstrated through the example app. Once you click the links to /hello or to /world, the corresponding component will be swapped in under the <Switch> container.
A couple of noteworthy things from the code example:
\n<Switch> component allows swapping between <Route>’s and render the correct component with a given URL path. However, <Route> components do not have to be wrapped inside a <Switch>. While standalone, a <Route> will simply render when the URL path matches its own path prop.<Redirect> component at the end acts as the default route. In case none of the other routes match with the current URL path, it simply redirects the user back to root.The workflow described above is intuitive from the end user’s point of view. However, there are times when the application’s internal logic demands a redirection to be performed following app events. In these occasions, React Router leverages the history object to allow for programmatic redirection:
For a traditional setup, the history object can be accessed through a component’s props through the user of the withRouter higher order component:
import * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface SampleComponentProps extends RouteComponentProps {\n // props go here\n}\nexport interface SampleComponentStateState {\n // states go here\n}\n\nclass SampleComponent extends React.Component<SampleComponentProps, SampleComponentStateState> {\n constructor(props: any) {\n super(props);\n }\n\n performRedirect = () => {\n const { history } = this.props;\n\n history.push("/desired-pathname")\n }\n\n render() {\n return <div/>\n }\n}\n\nexport default withRouter<SampleComponentProps>(SampleComponent);In the example above, you can see all the components required to extract the history object, as well as the history.push() call to perform the redirection.
For a more updated approach, React Router introduced the hook useHistory, which should blend in more naturally when programming with a React Hooks intensive workflow.
Certain redirects are unique in nature, and/or contain certain information about the previous user activity that you might want to pass on to the new component. In this case, the information can be passed through history states into the new component, which will then perform custom behavior based on these states:
\nWhen using <Link> component redirect, populate the to prop with an object that contains the new path as well as states, instead of just the string for pathname:
<Link\n to={{\n pathname: "/desired-pathname",\n state: {\n stateName: "state to be passed."\n }\n }}\n>\n Link text here.\n</Link>The same object can be used as argument to the history.push() call to achieve similar results:
history.push({\n pathname: "/desired-pathname",\n state: {\n stateName: "state to be passed."\n }\n})Once the state has been included with the redirection, on the receiving end, you can extract the state from the history.location.state object:
import * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface ReceivingComponentProps extends RouteComponentProps {\n // props go here\n}\nexport interface ReceivingComponentStateState {\n // states go here\n}\n\nclass ReceivingComponent extends React.Component<ReceivingComponentProps, ReceivingComponentStateState> {\n constructor(props: any) {\n super(props);\n }\n\n componentDidMount() {\n const { history } = this.props;\n if (history.location.state && history.location.state.stateName) {\n // stateName can be accessed here if it is passed in from a previous redirect action.\n console.log(history.location.state.stateName);\n }\n }\n\n render() {\n return <div/>\n }\n}\n\nexport default withRouter<ReceivingComponentProps>(ReceivingComponent);The state access is in componentDidMount in the example above.
At this point, hopefully, we have covered all the big bullet points to help you get started with navigation using React Router. I hope this write-up has been informative and helpful to your understanding of navigation in React, as well as helping you build your next React application.
\n","frontmatter":{"date":"November 20, 2020","updated_date":null,"description":"Everything essential you need to know about React Router.","title":"React Router Basics: Routing in a Single-page Application","tags":["JavaScript","Node","React","React Router"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4bcd64f320b4486ea6ddb7147ff85a96/58556/index.webp","srcSet":"/static/4bcd64f320b4486ea6ddb7147ff85a96/61e93/index.webp 200w,\n/static/4bcd64f320b4486ea6ddb7147ff85a96/1f5c5/index.webp 400w,\n/static/4bcd64f320b4486ea6ddb7147ff85a96/58556/index.webp 800w,\n/static/4bcd64f320b4486ea6ddb7147ff85a96/99238/index.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"excerpt":"Introduction Hello Everyone, In this article, we will learn how to send emails in .NET/C# using SMTP. As sometimes, it is required to send…","fields":{"slug":"/engineering/how-to-send-emails-through-csharp-dotnet-using-smtp/"},"html":"Hello Everyone, In this article, we will learn how to send emails in .NET/C# using SMTP. As sometimes, it is required to send emails to the users of the application. Email communication is considered a good way to communicate with the users of the application. There are different ways to send emails in .NET, but here we will talk about SMTP.
\nSMTP stands for Simple Mail Transfer Protocol. It is a communication protocol for electronic mail transmission. Mail servers and other message transfer agents use SMTP to send and receive mail messages. The Key Features of SMTP are it is considered a reliable server for sending emails, and it delivers the email more easily and quickly as it is developed from a simple platform.
\nIn the implementation part, we will first create a .NET Core class library, and then we will use that library in the .NET Core console app.
\nStep 1 - Create a .NET Core Console App project in IDE.
\nStep 2 - Add a .NET Core class library in the created solution.
\nStep 3 - Create a new class file in the class library and name it as MailArguments.cs. Add the arguments fields in this file, which will be used in sending the email.
\n public string MailTo { get; set; }\n public string Bcc { get; set; }\n public string Name { get; set; }\n public string Subject { get; set; }\n public string Message { get; set; }\n public string SmtpHost { get; set; }\n public string Password { get; set; }\n public int Port { get; set; }\n public string MailFrom { get; set; }Step 4 - Create a new class file in the class library; name it ExtensionMethods.cs. Here we will add the extension methods, which will be helpful to put the validation while sending the emails.
\n public static bool IsNotNullOrEmpty<T>(this IEnumerable<T> value)\n {\n return value != null && value.Any(); // This will return true if the value is not null and not empty\n }\n public static bool IsNotNullOrEmptyOrWhiteSpace(this string value)\n {\n return !(string.IsNullOrEmpty(value) || string.IsNullOrWhiteSpace(value)); // This will return true if the string value is not null, not empty and not contains any white space\n }\n public static bool IsNotNull(this object value)\n {\n return value != null; // This will return true if the object value is not null\n }Resolve missing references.
\nStep 5 - Create a new static class file in the class library name it as Mail.cs. In this class add a static method with try and catch block.
\n public static Tuple<bool, string> SendEMail(MailArguments mailArgs, List<Attachment> attachments, bool isSsl, Dictionary<string, string> headers){\n try{\n\n }\n catch (Exception ex){\n var msg = ex.Message;\n return Tuple.Create(false, msg);\n }\n }Resolve missing references.
\nIn this method, we are returning the Tuple<bool, string> which returns the status of the email sent and a message from the method in case of failure and success.
\nStep 7 - Add below lines of code which will help create the NetworkCredentials for SMTP in the created method SendEmail.
\n var networkCredential = new NetworkCredential\n {\n Password = mailArgs.Password,\n UserName = mailArgs.MailFrom\n };Here we are using NetworkCredential class to set the UserName and Password.
\nStep 8 - Add below lines of code, which will be used to initiate a message, subject, and IsBodyHtml.
\n var mailMsg = new MailMessage\n {\n Body = mailArgs.Message,\n Subject = mailArgs.Subject,\n IsBodyHtml = true // This indicates that message body contains the HTML part as well.\n };\n mailMsg.To.Add(mailArgs.MailTo);Step 9 - Add the below lines of code to check and add the Headers, BCC, and Attachments. Here we have used the earlier created extension methods to add the validation.
\n if (headers.IsNotNullOrEmpty() )\n {\n foreach (var header in headers)\n {\n mailMsg.Headers.Add(header.Key, header.Value);\n }\n }\n if (mailArgs.Bcc.IsNotNullOrEmptyOrWhiteSpace())\n {\n string[] bccIds = mailArgs.Bcc.Split(',');\n if (bccIds.IsNotNullOrEmpty())\n {\n foreach (var bcc in bccIds)\n {\n mailMsg.Bcc.Add(bcc);\n }\n }\n }\n if (attachments.IsNotNull())\n {\n foreach (var attachment in attachments)\n {\n if (attachment.IsNotNull())\n {\n mailMsg.Attachments.Add(attachment);\n }\n }\n }Step 10 - Add below the line of code to create a new email address using the From and Name fields of MailArguments class.
\n mailMsg.From = new MailAddress(mailArgs.MailFrom, mailArgs.Name);Step 11 - Add below lines of code to create a new SMTP client and use the send method of that client. When the email is successfully sent then we are creating a new tuple for sending the success message with a true flag that will indicate mail is sent.
\n var smtpClient = new SmtpClient(mailArgs.SmtpHost)\n {\n Port = Convert.ToInt32(mailArgs.Port),\n EnableSsl = isSsl,\n DeliveryMethod = SmtpDeliveryMethod.Network,\n UseDefaultCredentials = false,\n Credentials = networkCredential\n };\n smtpClient.Send(mailMsg);\n return Tuple.Create(true, "Email Sent Successfully.");Here we are initializing the below variables for the SMTP client.
\nDeliveryMethod - Delivery Method are 3 types. Here we have used the Network type.
\nStep 12 - In the Program.cs, which will be in the console app project, we will initialize and add the Mail arguments which are required to send an email.
\nStep 13 - Before that add the reference of the class library which we have created above in your console app by doing the below steps
\nRight-click on the console app project->Click on Add->Click on Reference->Select the created class library project.Step 14 - In the main method, add the below lines to initialize the arguments. Here I am using Gmail's SMTP server port and host address.
\n var mailArgs = new MailArguments\n {\n MailFrom = "<--From mail address from where mail should be sent-->", \n Password = "<--From mail address password-->", \n Name = "<--From mail address name-->",\n MailTo = "<--To mail address to where mail should be received-->", \n Subject = "<--Subject of the email-->", \n Message = "<--Message body of the email can contains HTML as well-->", \n Port = 587, \n SmtpHost = "smtp.gmail.com", \n Bcc = "<--BCC email id's separated by semicolon (;)-->" \n };\n List<Attachment> lstAttachments=new List<Attachment>\n {\n new Attachment("<--Path of the attachment-->>",MediaTypeNames.Image.Gif) //MediaType and Path of the attachment here I have selected Gif Image we have MediaTypeNames Application/Image/Text\n };\n\n Dictionary<string, string> dictHeaders = new Dictionary<string, string>\n {\n { "<--Key of the header-->", "<--Values of the header-->" }\n };Resolve missing references.
\nYou have to initialize all the variables as described above. From and Password will be the Gmail's account email id and password respectively because we are using Gmail's SMTP server.
\nIn the attachment, I have used the MediaTypeNames.Image.Gif, which is used for Gif Images. There are different constructors for the attachment class. For reference, you can read from here- Attachment Class. Attachments are not necessary to be passed. You can pass null in the SendMail method below.
\nHeaders are custom headers that will be sent with the email. It is not necessary to pass these headers. You can pass null in the SendMail method below.
\nStep 15 - Add the below line of code to call the SendMail method of the class library.
\n Console.WriteLine(Mail.SendEMail(mailArgs, lstAttachments, true, dictHeaders).Item2);Here we have used Gmail's SMTP server to send emails (From Mail Address) so we have to enable the Less Secure Apps in our from mail address account by enabling Allow less secure apps else we will get the error from Gmail's SMTP server (The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.7.0 Authentication Required.)
\nIn this article, we have learned about how to How to send emails through C#/.NET using SMTP. We have used the class library to initiate in the console app to send a mail to the particular emailId.The complete code for this blog can be found at Github Repo.
\n","frontmatter":{"date":"November 19, 2020","updated_date":null,"description":" In this article, we will learn how to send emails in .NET/C# using SMTP","title":"How to send emails in C#/.NET using SMTP","tags":[".NET","C#","SMTP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/0def756cf8634c19ffe25f2d6fc37dbd/58556/coverimage.webp","srcSet":"/static/0def756cf8634c19ffe25f2d6fc37dbd/61e93/coverimage.webp 200w,\n/static/0def756cf8634c19ffe25f2d6fc37dbd/1f5c5/coverimage.webp 400w,\n/static/0def756cf8634c19ffe25f2d6fc37dbd/58556/coverimage.webp 800w,\n/static/0def756cf8634c19ffe25f2d6fc37dbd/99238/coverimage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","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":"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.
\nWith 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.
\nIn this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.
\nYou’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.
\nWhether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.
\nJSON 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.
\nA JWT consists of three parts:
\nExample of a token structure:
\n<base64Header>.<base64Payload>.<signature>
\n![\"Flowchart](\"/f29edbf2978577390c7ffa02e9bc4dda/lr-JWT-authentication.webp\")
JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.
\nLoginRadius 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.
\nIf 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:
\nThe 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![\"Screenshot](\"/9fb19dd9c88c7916aeebd03ab6e661b7/lr-admin-console.webp\")
{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",
\n\"expires_in\": 1800
\n}
\nThis 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.
\nIf 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:
\nSend a POST login request to the LR Authentication URL:
\nPOST /identity/v2/auth/login
\nInclude the user’s credentials (email + password) in the request body.
\n{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",
\n\"expires_in\": 3600
\n}
\nWith 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.
\nWith this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.
\nNOTE- 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.
\nTo get started with JWT implementation, you can read our complete developer documentation.
\n![\"Illustration](\"/15ec02ac98d24a9f1f28e5d0f06b9174/IDX-vs-Direct-API-JWT.webp\")
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.
\nIn 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.
\nIn 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.
\nGood session management ensures:
\nUser Logs In
\nClient Stores the Token
\nAccess Token Expiry
\nToken Renewal
\nWhen the user logs out, both the access token and refresh token should be cleared from client storage.
\nHowever, access tokens are stateless and cannot be revoked mid-lifecycle unless:
\nCombining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.
\n![\"illustration](\"/e55ae4bbc8ce62e13f03e46e29ebe7cc/api-economy.webp\")
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.
\nChoosing where to store the JWT is a crucial security decision. The most common storage options are:
\nEach option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.
\nAccess Tokens
\nRefresh Tokens
\nJWT 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.
\nWith 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.
\nA: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.
\nA: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.
\nA: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.
\nA: 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":108,"currentPage":19,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}