![\"Directory](\"/b127258daa14eecbda3f07a8bccce890/Directory-Structure-Svelte-App.png\")
In this tutorial, I’ll talk about adding authentication in a Svelte application using LoginRadius Authentication APIs. You'll understand step by step how to:
\nYou'll also learn how to consume REST APIs in a Svelte app using Fetch API and update user information in your Svelte store.
\nSvelte is a lightweight and minimal JavaScript compiler that ships a single JavaScript bundle to your application without any internal code of its own. This results in smaller bundle size and often a faster running application. It was also the most loved framework of 2021.
\nBut what's the first feature you'd add in a Svelte application? Authentication! It's the gateway for your users to interact and use your website.
\nSo in this post, I’ll talk about how to add authentication in a Svelte application.
\nYou'll learn how to create forms in Svelte and add reactivity to it. You'll also understand how to conditionally render different UI components and set up protected routes for authenticated users in a Svelte application.
\nTo speed things up, you won't build your own authentication services from scratch. Instead, you'll use LoginRadius to quickly configure an authentication backend for your Svelte App.
\nHere's a little demo of what your Svelte App would look like by the end of the tutorial:
\n\nLooks exciting? Let's jump right into it!
\nLet's start by creating a new Svelte project and adding some boilerplate code.
\nNavigate into the directory of your choice and create a new Svelte project by running:
\nnpx degit sveltejs/template svelte-auth-appThat should create a new Svelte project with a simple starter template.
\nAdditionally, you'll need to install svelte-navigator package to set up routing in your Svelte app:
\nnpm i svelte-navigatorYou need to add environment variable support in your Svelte app to store and use your LoginRadius API Keys and Secrets.
\nFirst, install a package called dotenv that let's create and use a special .env file to define your environment variables.
npm i dotenvNext, head over to the rollup.config.js file. Here, make some configurational changes on the plugins property, so your Svelte app can read those environment variables on the client-side:
\t...\n\tplugins: [\n\t\treplace({\n\t\t\t// stringify the object\n\t\t\t__myapp: JSON.stringify({\n\t\t\t env: {\n\t\t\t\tisProd: production,\n\t\t\t\t...config().parsed // attached the .env config\n\t\t\t }\n\t\t\t}),\n\t\t }),\n ...\n\t],You can refer to the complete rollup.config.js file for this project here.
Besides the initial set of files, your project will have the following directory structure:
\n
So go ahead and create those files and folders accordingly. I'll talk about each of these as you start filling them with some code.
\nYour starter template should come with the following styles inside your App.svelte file:
main {\n text-align: center;\n padding: 1em;\n max-width: 240px;\n margin: 0 auto;\n}\n\nh1 {\n color: #ff3e00;\n text-transform: uppercase;\n font-size: 4em;\n font-weight: 100;\n}\n\n@media (min-width: 640px) {\n main {\n max-width: none;\n }\n}However, I have also added some additional styles inside the global stylesheet inside the /public/build/global.css file. You can copy those styles from here.
Your Svelte app will store the authenticated user's data in a global data store to easily access and modify that data from any component within your application. Svelte provides you with the writable function inside the svelte/store dependency.
Create a global object called user inside your /src/stores.js file:
import { writable } from "svelte/store"\n\nexport const user = writable(\n localStorage.user ? JSON.parse(localStorage.getItem("user")) : null\n)You have also synced the above user object with the browser's local storage so that this data persists on page reloads. If you're unfamiliar with what local storage is, check out my guide on Local Storage vs. Session Storage vs. Cookies that dives deeper into browser storage and other related concepts.
The root component in your Svelte app is the App Component. This is located inside /src/App.svelte.
It has the following imports declared inside:
\n<script>\n /** IMPORTS */ import Login from './Login.svelte'; import Signup from\n './Signup.svelte'; import Home from './Home.svelte'; import PrivateRoute from\n "./routes/PrivateRoutes.svelte"; /** VARIABLES */ const sdkoptions = {}\n</script>It also has an sdkoptions variable that will store the environment variables that you can easily pass to different components as and when they need it. You can get rid of any additional HTML inside the App.svelte file generated by the starter template.
Let's head over to the /src/Login.svelte file to create the Login Page.
Here's what the HTML of your Login Form consists of:
\n<h3>Login</h3>\n<form on:submit|preventDefault="{handleSubmit}">\n <input\n class="form-field"\n bind:value="{email}"\n type="email"\n placeholder="Email"\n />\n <input\n class="form-field"\n bind:value="{password}"\n type="password"\n placeholder="Password"\n />\n <button class="form-field">\n Login\n </button>\n</form>\n<p>\n Don't have an account?\n <strong class="link" on:click="{navigateToSignup}">Sign up</strong>\n</p>You have a login form with two input fields for email and password and a submit button. The form also has an on:submit handler with an event modifier to prevent the default reloading action of the form when it gets submitted.
After the form, you have a simple link with an on:click handler that allows the user to navigate to the Signup page.
Inside the script of your Login component, create two variables — email and password — to handle the bindings to the input fields. Also, make the sdkoptions variable exportable since you'll receive it as props from the App component.
<script>let email; let password; export let sdkoptions;</script>You also need to create a function called handleSubmit that is the on:submit handler for your Login form:
<script>\n\t...\n const handleSubmit=(e)=>{\n let loginFields={email,password};\n\t console.log(loginFields)\n }\n const navigateToSignup=()=>{}\n</script>At the moment, you're simply encapsulating the email and password bindings into a JavaScript object. Later, you'll send a request to your Login API here. You also have an empty navigateToSignup function that I'll come back to once you set up your routes.
Let's render the Login component inside your App.svelte file:
<main>\n <Login />\n</main>![\"Login](\"/a83987b29ea11ed6919d189c638e18b3/Login-Page.png\")
Awesome! Let's follow the same process to create your Signup form.
\nHead over to the /src/Signup.svelte file to create your Signup Page.
Similar to the Login Form, the Signup Form will have the following HTML:
\n<h3>Create a New Account</h3>\n<form on:submit|preventDefault="{handleSubmit}">\n <input\n class="form-field"\n bind:value="{firstName}"\n type="text"\n placeholder="First Name"\n />\n <input\n class="form-field"\n bind:value="{lastName}"\n type="text"\n placeholder="Last Name"\n />\n <input\n class="form-field"\n bind:value="{email}"\n type="email"\n placeholder="Email"\n />\n <input\n class="form-field"\n bind:value="{password}"\n type="password"\n placeholder="Password"\n />\n <button class="form-field">\n Signup\n </button>\n</form>\n<p>\n Already have an account?\n <strong class="link" on:click="{navigateToLogin}">Login</strong>\n</p>The only difference is now you have two additional fields — first name and last name. You also have a link just below the signup form that takes the user to the login page.
\nHere's what the script section of your Signup.svelte file should look like:
<script>\n\n\tlet email;\n let password;\n let firstName;\n let lastName;\n let loading;\n\n\n export let sdkoptions;\n\n const handleSubmit=()=>{\n const signupFields={\n "FirstName": firstName,\n "LastName": lastName,\n "Email": [\n {\n "Type": "Primary",\n "Value": email\n }\n ],\n "Password": password\n }\n console.log(signupFields)\n }\n\n const navigateToLogin=()=>{}\n</script>Your signupFields object has a specific format because it aligns with the structure of your Signup API's request. It would make complete sense when you hook your Signup API here.
Let's render the Signup component inside your App.svelte file:
![\"Signup](\"/f70cc840f16f82553b479878867845f4/Signup-Page.png\")
Let's create your Home component or the page where you'll redirect an user on a successfull login. Inside /src/Home.svelte file, add the following HTML:
{#if user && _user}\n<h3>Welcome {_user?.profile?.FullName}</h3>\n<button on:click="{logout}">Logout</button>\n{/if}In the above HTML, you simply use some Svelte conditionals to render the user's name and a logout button. The script part of your Home component looks like this:
\n<script>\n import {user} from './stores';\n\n let _user;\n\n user.subscribe(data=>_user=data)\n const logout=()=>{\n user.set(null);\n localStorage.clear();\n }\n\n</script>You import the global user object from your Svelte store and store it inside your Home component's state _user. For the logout function, you simply set this user object in your store to null and clear the local storage.
The next step is to set up LoginRadius, so you can start using its Authentication APIs from your Svelte App.
\nHead over to LoginRadius and create a new account by filling in the following details:
\n![\"Signup](\"/5f0a6c05fe8103a95752a598ff49cb06/Signup-2.png\")
You'll then see a form with the name of your App, a URL, and a Data Center:
\n![\"Signup](\"/d8b3b347f5c28460e05fcc3aeb364a90/Signup-3.png\")
Hit Next and LoginRadius will set up an authentication app for you. You can try the pre-built authentication page LoginRadius provides for your app by clicking on Try Signing Up Now.
\n![\"Signup](\"/4113757d959a0955ec852e781c5f1dad/Signup-4.png\")
Once you do that, you'll be shown a pre-built authentication page of your LoginRadius app:
\n![\"LoginRadius](\"/294bf6ef8298c2248b922f708db69374/LoginRadius-Auth-Page.png\")
However, for this tutorial, all you need are the LoginRadius APIs since you already have a frontend (your Svelte App) in place.
\nOnce you're inside your LoginRadius account, head over to the Configurations tab from your dashboard. Then expand the API Credentials tab of your application.
\n![\"LoginRadius](\"/2f2ec40982bff4f7b0ff5f1e2feb34e6/LoginRadius-Configuration-Tab.png\")
Inside that, you should see your APP Name, API Key, and API Secret.
\n![\"LoginRadius](\"/f186d4d464190f4ab2407c896cb101be/LoginRadius-API-Credentials.png\")
Head back to the Svelte App's .env file and add the above credentials inside it:
APP_NAME=<YOUR_APP_NAME>\nAPI_CLIENT_KEY= <YOUR_APP_API_KEY>\nAPI_SECRET= <YOUR_APP_API_SECRET>You'll need to ensure that the above .env file is present inside the .gitignore of your Svelte project. You don't want to accidentally push this file to a public repository on Github.
/node_modules/\n/public/build/\n\n.DS_Store\n\n.envFinally, you need to extract these environment variables in your sdkoptions variables inside your App component file.
...\n\tconst sdkoptions = {\n\t"apiKey": __myapp["env"].API_CLIENT_KEY,\n\t"appName":__myapp["env"].APP_NAME,\n "apiSecret":__myapp["env"].API_SECRET\n\t}\n...And pass this variable as props to both the Login and Signup component:
\n...\n<Login {sdkoptions} />\n<Signup {sdkoptions} />\n...Great! Now you're ready to integrate LoginRadius APIs in your Svelte app.
\nYou'll use two APIs — one for registering the user on the Signup page and the other for authenticating the user on the Login Page. However, both APIs will take the API key and API secret as query parameters.
\nconst endpoint = `${BASE_URL}?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`So in the above endpoint, you'll only change the BASE_URL according to which API you're hitting.
Inside your Signup.svelte file, you'll create a variable called signupResponse to store the result of the Signup API. It also has properties like success and error to prompt the user on the status of your API calls.
<script>\n let signupResponse={\n success:null,\n error:null,\n uid:null,\n id:null,\n fullname:null\n }\n \tlet loading;\n\n</script>Since an API request is an asynchronous process, you also have a' loading' variable to disable the submit button until the API responds.
\nYou need to send a request to the Signup API inside your handleSubmit() function. First, set the loading to true and reset the signupResponse object. Then, use the fetch API to make a POST request with the signupFields object as post parameter:
const handleSubmit = () => {\n const signupFields = {\n FirstName: firstName,\n LastName: lastName,\n Email: [\n {\n Type: "Primary",\n Value: email,\n },\n ],\n Password: password,\n }\n loading = true\n signupResponse = {\n success: null,\n error: null,\n uid: null,\n id: null,\n fullname: null,\n }\n const endpoint = `https://api.loginradius.com/identity/v2/manage/account?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`\n fetch(endpoint, {\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify(signupFields),\n })\n .then(response => response.json())\n .then(data => {})\n .catch(error => console.log(error))\n .finally(() => (loading = false))\n}Inside the callback of your fetch request, you can handle any errors returned by the API based on different error codes. In case of success, you'll populate your signupResponse object with data from the API. In the finally block, set the loading to false.
...\n.then(data=>{\n if(data.ErrorCode){\n if(data.ErrorCode==936){\n signupResponse={\n ...signupResponse,\n error:data.Message\n }\n }\n else if(data.ErrorCode==1134){\n signupResponse={\n ...signupResponse,\n error:data.Errors[0].ErrorMessage\n }\n }else{\n signupResponse={\n ...signupResponse,\n error:data.Description\n }\n }\n }else{\n signupResponse={\n ...signupResponse,\n success:"Account created successfully! Please login via the same details.",\n fullname:data.FullName,\n id:data.id,\n uid:data.Uid\n }\n }\n })\n...You can set the disabled attribute on your Submit button based on the loading state of the API.
\n...\n<button disabled="{loading}" class="form-field">\n Signup\n</button>\n...Lastly, render a conditional template based on the status of your Signup API.
\n... {#if signupResponse.error}\n<p class="error">Error ❌ {signupResponse.error}</p>\n{/if} {#if signupResponse.success}\n<p class="success">\n Success ✔ {signupResponse.success}\n</p>\n{/if} ...And that's it! Let's give your Signup functionality a whirl. Create a new account first:
\n![\"Signup](\"/1ec6121e723d287acd3097bcf72a8fe8/Signup-Success-with-API.png\")
And voila! You can see in the network tab that the API is successful. And you got back a bunch of data about the newly created user. You also have a success that appears underneath the Signup form.
\nLet's also test an erroneous flow. What if you signup via the same credentials again?
\n![\"Signup](\"/332563b5257d0cf45b9ae3039ea0a832/Signup-Failure-Existing-Email.png\")
The LoginRadius Signup API returns the error message, details, error code, etc., that you've handled accordingly.
\nAlso, if you use a simple password, the LoginRadius API returns an error based on a validation mechanism.
\n![\"Signup](\"/af70d87365d494ebae97ec028b47d597/Signup-Error-Password-Validation.png\")
That's great because it makes your authentication workflow more air-tight.
\nSimilarly, you can now integrate the Login API as well in your Login.svelte file:
<script>\n\n\t...\n import {user} from './stores';\n\n let email;\n let password;\n let loading;\n\n let loginResponse={\n error:null,\n success:null,\n profile:null,\n auth_token:null\n }\n\n export let sdkoptions;\n\n const handleSubmit=(e)=>{\n let loginFields={email,password};\n loading=true;\n loginResponse={\n error:null,\n success:null,\n profile:null,\n auth_token:null\n }\n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`;\n loading=true;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n console.log(data)\n if(data.ErrorCode){\n if(data.ErrorCode==936){\n loginResponse={\n ...loginResponse,\n error:data.Message\n }\n }\n else if(data.ErrorCode==1134){\n loginResponse={\n ...loginResponse,\n error:data.Errors[0].ErrorMessage\n }\n }else{\n loginResponse={\n ...loginResponse,\n error:data.Description\n }\n }\n }else{\n loginResponse={\n ...loginResponse,\n success:true,\n profile:data.Profile,\n auth_token:{\n access_token:data.access_token,\n refresh_token:data.refresh_token,\n ttl:data.expires_in\n }\n }\n user.set(loginResponse)\n localStorage.setItem('user',JSON.stringify(loginResponse))\n\n }\n })\n .catch(error=>console.log(error))\n .finally(()=>loading=false);\n }\n ...\n\n</script>\n\n...\n{#if loginResponse.error}\n\t<p class="error">Error ❌ {loginResponse.error}</p>\n{/if}\n{#if loginResponse.success}\n\t<p class="success">\n Success ✔\n </p>\n{/if}\n<p>\n Don't have an account?\n <strong class="link" on:click={navigateToSignup}>Sign up</strong>\n</p>If you relate it to the Signup component, it's almost identical. The only thing that has changed is the API endpoint. Additionally, if the Login API is a success, you're also storing the data in your user store and consequently updating your localStorage.
Let's also test this out:
\n![\"Login](\"/4bb4c7881a3e1accbb0b996f7bed9b77/Login-API-Success.png\")
Let's also test an erroneous Login flow by entering the credentials for a user that doesn't exist:
\n![\"Login](\"/5b4dd5cb3d6ed27fc288aff238ded14f/Login-Error.png\")
Great! Let's now tie all these individual pages together by setting up routing in your Svelte app.
\nYou'll use the svelte-navigator package that you previously installed to configure routing in your app.
First, you'll define the routes for the Signup, Login, and Home pages inside your App.svelte file:
<script>\n\n /** IMPORTS */\n import { Router, Route } from "svelte-navigator";\n ...\n</script>\n\n<main>\n <Router>\n <div>\n <Route path="signup">\n <Signup {sdkoptions} />\n </Route>\n <Route path="login">\n <Login {sdkoptions} />\n </Route>\n <Route path="/">\n <Home />\n </Route>\n </div>\n </Router>\n</main>If you visit /login, you should see the Login Page. Similarly, if you go to /signup, you should see the Signup Page.
Remember, you had a link to the Signup page at the bottom of the Login page and vice versa?
\nAlso, your login page doesn't redirect anywhere after you login successfully. In order to programmatically navigate to a specific page on completion of an action, you can use the useNavigate hook from the svelte-navigator library.
To use this hook, import useNavigate and save its invoked reference inside a variable, as follows:
<script>\n import {useNavigate} from "svelte-navigator"; const navigate = useNavigate();\n ...\n</script>Now call the navigate() function and pass the path of the page you wish to redirect to. So let's complete the navigateToLogin function inside your Signup component:
<script>... const navigateToLogin=()=>navigate('/login'); ...</script>Similarly, you can also complete the navigateToSignup function inside your Login component:
<script>... const navigateToSignup=()=>navigate('/signup') ...</script>Finally, you'll also navigate to the Home page on a successful response from your Login API inside your Login component's handleSubmit function:
const handleSubmit=(e)=>{\n ...\n fetch(endpoint,\n ...\n .then(data=>{\n \t\t\t\t...\n }else{\n\t\t\t\t...\n navigate('/')\n }\n })\n ...\n }\n\n</script>Great! You can now navigate from your Login page to the Signup page and vice versa. You should also be automatically redirected to the Home page on a successful login.
\nIf you try to visit the Home component by entering the path / in the URL, you'll be able to see the Home page regardless of your authenticated state. However, you must protect this route so that it's only accessible to authenticated users in your application.
For this purpose, you have created a RouteGuard.svelte file inside your routes folder. It's a higher-order component that uses the useNavigation hook to programmatically redirect to the login page if an unauthenticated user visits the home page. You use the user object from your Svelte store to validate the authenticated state of a user.
<script>\n import { useNavigate, useLocation } from "svelte-navigator";\n import { user } from "../stores";\n\n const navigate = useNavigate();\n const location = useLocation();\n\n $: if (!$user) {\n navigate("/login", {\n state: { from: $location.pathname },\n replace: true,\n });\n }\n </script>\n\n {#if $user}\n <slot />\n {/if}You can then wrap another higher order Route component on top of the RouteGuard component inside the PrivateRoutes.svelte file, as follows:
<script>\n import { Route } from "svelte-navigator";\n import RouteGuard from "./RouteGuard.svelte";\n\n export let path;\n </script>\n\n <Route {path} let:params let:location let:navigate>\n <RouteGuard>\n <slot {params} {location} {navigate} />\n </RouteGuard>\n </Route>Now, all you need to do is use this PrivateRoute component to wrap your Home component instead of a regular Route component:
...\n\t<PrivateRoute path="/" let:location>\n\t\t<Home />\n\t</PrivateRoute>\n...And now you should be able to access the / route or the Home page only when you're authenticated:
![\"Home](\"/9abde471077ac6c2b3ec3795169cafac/Home-Component.png\")
I hope I've shed some light on how to authenticate Svelte apps. You can do a lot from here, like adding Svelte Kit to this project to simplify the routing system for your Svelte application.
\nYou can refer to the entire source code for this tutorial here.
\nYou can also explore LoginRadius to add forgot password functionality or social signups with Facebook and Google.
\n","frontmatter":{"date":"March 10, 2022","updated_date":null,"description":"Are you building Svelte apps? In this tutorial, you'll learn to add secure user authentication in your Svelte apps using LoginRadius APIs.","title":"How to Authenticate Svelte Apps","tags":["Authentication","Svelte","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/5d69922aea9b04a51e9dbc994fd914cd/ee604/authenticate-svelte-apps.png","srcSet":"/static/5d69922aea9b04a51e9dbc994fd914cd/69585/authenticate-svelte-apps.png 200w,\n/static/5d69922aea9b04a51e9dbc994fd914cd/497c6/authenticate-svelte-apps.png 400w,\n/static/5d69922aea9b04a51e9dbc994fd914cd/ee604/authenticate-svelte-apps.png 800w,\n/static/5d69922aea9b04a51e9dbc994fd914cd/f3583/authenticate-svelte-apps.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Siddhant Varma","github":"FuzzySid","avatar":null}}}},{"node":{"excerpt":"Github is great, as you may already know. But, did you ever think to make your profile attractive for potential employers, followers…","fields":{"slug":"/engineering/build-your-github-profile/"},"html":"Github is great, as you may already know.
\nBut, did you ever think to make your profile attractive for potential employers, followers, recruiters, and visitors?
\nLet's make a better version of it.
\nIt's up to you to decide how you want this frame — photo-less, cartoon avatar, or best explaining image.
\nFor the best image, take a quality click; quality means not blurred, perfect lighting, and good posture.\nIf someone looks at the photo, it shall explain your personality.
\nGithub has a feature called README if you do not know already.
\nCheck out some listing of awesome GitHub profiles.
\nTo start this, first, you need to create a project that is the same as your GitHub username.
\nExample: My user name is abhir9, and I need to create a repo with the same name abhir9 with a README.md file.
This README.me will act as the profile page: abhir9
It is the actual README file created using a repo with my GitHub username: abhir9
\nHere you can add your quotes, hello statement, greetings, etc. It is connected to the viewer on your behalf.
\nSo write a short paragraph or a brief story to introduce yourself.
\nThere are some apps from contributors that extract the information based on your profile name and share stats and charts.
\nhttps://github-readme-stats.vercel.app/api?username=abhir9&show_icons=true&count_private=true&theme=reacthttps://readme-typing-svg.herokuapp.com?size=50¢er=true&vCenter=true&width=800&height=100&lines=Namaste%20%F0%9F%99%8F%3BPranam%20%F0%9F%99%8F%3BKhamma%20Ghani%20%F0%9F%99%8F%3BVanakkam%20%F0%9F%99%8F%3BSat%20Sri%20Akaal%20%F0%9F%99%8F%3BAssalam%20Alaikum%20%F0%9F%99%8F%3Bhttps://views.whatilearened.today/views/github/abhir9/abhir9.svg?cache=removehttps://github-readme-streak-stats.herokuapp.com/?user=abhir9&theme=reacthttps://raw.githubusercontent.com/devicons/devicon/master/icons/ubuntu/ubuntu-plain.svgMany other online apps can be used per your need — e.g., how you want to decorate your profile page.
\nGithub allows you to pin up to 6 repos.
\nTry to pin the best of your projects' repos. Mostly, people do visit these repos if they land on your profiles.
\nThere is a heat map that represents your contributions.
\nHeat map graph will automatically generate as per your contributions. Try to keep it greener by contributing usefully to your favorite projects.
\nWhether it's a minor or significant project, add a well-descriptive README file. It helps anyone clearly understand what your project does and how they can contribute if they want to.
\nFormat it in a better way; if you don't know very much about Markdown format, you can use an online tool like Pandao
\nYou can use images, screenshots, gifs, resources list, contribution guidelines, license, etc.
\n","frontmatter":{"date":"February 28, 2022","updated_date":null,"description":"Your GitHub profile is vital in showcasing your programming skills. Learn how you can leverage GitHub profile to showcase your skills and expertise.","title":"How to Build Your Github Profile","tags":["Github"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/91552ab64061624f85043adb83cc0973/ee604/index.png","srcSet":"/static/91552ab64061624f85043adb83cc0973/69585/index.png 200w,\n/static/91552ab64061624f85043adb83cc0973/497c6/index.png 400w,\n/static/91552ab64061624f85043adb83cc0973/ee604/index.png 800w,\n/static/91552ab64061624f85043adb83cc0973/f3583/index.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"excerpt":"As human interactions become more and more digitalized, your business and personal websites have become far more important than a couple of…","fields":{"slug":"/engineering/importance-of-search-functionality-for-websites/"},"html":"As human interactions become more and more digitalized, your business and personal websites have become far more important than a couple of decades ago.
\nWhen a user lands on your website, it's essential to help the user find the right information as effectively as possible. Otherwise, the user may leave the website, losing potential business opportunities or visibility.
\nOne of the important ways to improve website design and help users find the information they want is to make the site searchable using the search functionality. It enables users to find content by searching for particular words without understanding or exploring the entire website or app, a quick or less complex way to find content.
\nLet's discuss why your website needs to have search functionality and its benefits.
\nIf you have a large site -- assuming an e-commerce website or having hundreds of pages, users could find it extremely challenging to navigate to what they're looking for. In this situation, a search box allows your users to see what they need with a quick search.
\nRegardless of where each user lands on your website, a search box will help them quickly find specific topics or pages.
\nSimply, the more straightforward it is for users to navigate around your entire website, the more probable that they will explore it.
\nIf it's difficult for users to track down what they're looking for, they'll head off to somewhere else that can fulfill their requirements. Help your users engage quite a bit on your site with a search textbox.
\nAssuming you can incorporate your search bar into your Google Analytics, you'll have the option to track how frequently individuals look for a specific term. You can utilize this data for on-page content, order details, or billing plans.
\nFor example, if the most searched item on your website is Perfume, you could create a separate section or link on the home page so that users can directly navigate to that item faster.
\nIn this mobile era, it's critical to ensure your site and applications are mobile-friendly. Whenever users are on their mobile phones, they could be out and in a hurry, and a search feature will allow them to search and navigate to a specific page rapidly.
\nPeople are habitual to using some features to the level that they don't think much before using them. Search functionality is one of them. In this digital world, you can't have a site that doesn't offer an ideal user experience. Keep in mind that this minor component can significantly help increase your website’s engagement rates.
\nAs the number of site visits increases, it indicates an improvement in brand engagement. Users visit your site because they are happy with the information and experience. This helps to raise your brand image among other competitors in your market.
\nA positive user experience will lead to more visits to your site. As the visitors' count and time spent on your website increase, search engines like Google will consider your website performing well and of good quality, which will further elevate your page rankings in search results.
\nYou will also find some new keywords from users' searches to search for similar or different information on Google or other search engines. These search keywords can be those words that you want to target in SEO and other marketing and search strategies.
\nAs you expand your website with new content, blog posts, or new products, it can make your website cumbersome and affect user experience. Accordingly, finding an exact item can become difficult. However, with the right site search strategy, website size or navigation does not hamper the user experience. Users can find what they need and get ideas for other related items.
\nIn a nutshell, search functionality on your website helps offer a smooth, consistent experience for your users. And a well-implemented search functionality has more potential to ensure the website's success.
\nTry not to stop your users from exploring all the features your site offers; add search functionality to your site soon!
\n","frontmatter":{"date":"February 24, 2022","updated_date":null,"description":"Adding a search functionality is important for any website to improve user experience. Read more to understand the benefits of enabling search on your website.","title":"Why Implement Search Functionality for Your Websites","tags":["Search"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3591f20e84a98d932a7c1fa348532e41/ee604/search-functionality.png","srcSet":"/static/3591f20e84a98d932a7c1fa348532e41/69585/search-functionality.png 200w,\n/static/3591f20e84a98d932a7c1fa348532e41/497c6/search-functionality.png 400w,\n/static/3591f20e84a98d932a7c1fa348532e41/ee604/search-functionality.png 800w,\n/static/3591f20e84a98d932a7c1fa348532e41/f3583/search-functionality.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Neha Vyas","github":"nehavyasqa","avatar":null}}}},{"node":{"excerpt":"Introduction User authentication is the process of validating a user's identity to ensure that they are who they claim to be. Implementing…","fields":{"slug":"/engineering/guest-post/authenticating-flutter-apps/"},"html":"User authentication is the process of validating a user's identity to ensure that they are who they claim to be. Implementing user authentication in your application is critical to prevent unauthorized users from accessing sensitive information.
\nThis tutorial focuses on implementing user authentication and registration in Flutter applications using the LoginRadius API.
\nIf you wish to follow along with this tutorial, you must have the following set up:
\nThis tutorial is verified with Flutter v2.5.1 and Android Studio v3.5.
\nLoginRadius is a cloud-based, SaaS Customer Identity and Access Management (CIAM) platform that provides developers and businesses simplified and robust features for managing customer identity, privacy, and access. LoginRadius offers high-level, secure, and well-documented APIs for integrating User Authentication and Single Sign-on (SSO) into your application.
\nLoginRadius offers:
\nSo, with everything out of the way, let's get started.
\nAfter creating an account with LoginRadius, it sets up a free app for you. This is the app in which you would integrate the LoginRadius API with Flutter. Here my app name is “tayy”.
\nNext, you need to obtain your LoginRadius API credentials. To do so, login to your Dashboard and navigate to the Configuration tab in the sidebar menu. You will find your API credentials under the API Key and Secret section. Copy and store your APP Name, API Key, and API Secret somewhere safe and easily accessible.
Create a new Flutter project and navigate to the folder of the application by running the following commands in your terminal:
\nflutter create loginradius_example\ncd loginradius_exampleNext, you need to install the dio package as a dependency in our project. The dio package is a powerful HTTP client used for making network requests.
Run the following command to get the newest version of the dio package in your project.
flutter pub add dioThen, install the dependency by running flutter pub get in your terminal.
The project is being structured in this order:
\n![\"Folder](\"/b063fac3cc95c21f1d7327d989a883ef/folder-structure.png\")
Create a new dart file named api_client.dart and import the dio package into the file, as follows:
import 'package:dio/dio.dart';Now let’s create a class named ApiClient and initialize the Dio object in it. The ApiClient class will contain several methods for making network requests based on your features, including User Registration, User Login, Get User Profile Data, and User Logout.
import 'package:dio/dio.dart';\n\nclass ApiClient {\n final Dio _dio = Dio();\n\n Future<Response> registerUser() async {\n //IMPLEMENT USER REGISTRATION\n }\n\n Future<Response> login() async {\n //IMPLEMENT USER LOGIN\n }\n\n Future<Response> getUserProfileData() async {\n //GET USER PROFILE DATA\n }\n\n Future<Response> logout() async {\n //IMPLEMENT USER LOGOUT\n }\n}Before implementing the user registration functionality, you must first obtain the user registration endpoint URL from the LoginRadius API Docs.
\nAfter retrieving the endpoint URL, you need to send a POST request to the endpoint using the Dio package by passing in:
apiKey you obtained earlier as a query parameter;userData as the request body; and,SOTT key as a header, as shown below.class ApiClient {\n //...\n Future<Response> registerUser(Map<String, dynamic>? userData) async {\n try {\n Response response = await _dio.post(\n 'https://api.loginradius.com/identity/v2/auth/register', //ENDPONT URL\n data: userData, //REQUEST BODY\n queryParameters: {'apikey': 'YOUR_API_KEY'}, //QUERY PARAMETERS\n options: Options(headers: {'X-LoginRadius-Sott': 'YOUR_SOTT_KEY', //HEADERS\n }));\n //returns the successful json object\n return response.data;\n } on DioError catch (e) {\n //returns the error object if there is\n return e.response!.data;\n }\n }\n }The below code snippet shows how you’ll send a POST request to the LoginRadius login endpoint URL https://api.loginradius.com/identity/v2/auth/login, passing in your apiKey as a query parameter and the email and password of the user as the request body.
class ApiClient {\n //...\n Future<Response> login(String email, String password) async {\n try {\n Response response = await _dio.post(\n 'https://api.loginradius.com/identity/v2/auth/login',\n data: {\n 'email': email,\n 'password': password\n },\n queryParameters: {'apikey': 'YOUR_API_KEY'},\n );\n //returns the successful user data json object\n return response.data;\n } on DioError catch (e) {\n //returns the error object if any\n return e.response!.data;\n }\n }\n }To retrieve the user profile details, send a GET request to the Read Profile Endpoint URL https://api.loginradius.com/identity/v2/auth/account, passing in your apiKey as a query parameter and the user's access token as the header.
\n\nThe user’s access token is gotten from the successful response object of the User Login endpoint.
\n
class ApiClient {\n //...\n\n Future<Response> getUserProfileData(String accesstoken) async {\n try {\n Response response = await _dio.get(\n 'https://api.loginradius.com/identity/v2/auth/account',\n queryParameters: {'apikey': 'YOUR_API_KEY'},\n options: Options(\n headers: {\n 'Authorization': 'Bearer ${YOUR_ACCESS_TOKEN}',\n },\n ),\n );\n return response.data;\n } on DioError catch (e) {\n return e.response!.data;\n }\n }Finally, to implement the user logout functionality, you would send a GET request to the Invalidate User Access Token endpoint URL https://api.loginradius.com/identity/v2/auth/access_token/InValidate. This API call invalidates the user's active access token, requiring them to re-authenticate if they want to access their data.
class ApiClient {\n //...\n\n Future<Response> logout(String accessToken) async {\n try {\n Response response = await _dio.get(\n 'https://api.loginradius.com/identity/v2/auth/access_token/InValidate',\n queryParameters: {'apikey': ApiSecret.apiKey},\n options: Options(\n headers: {'Authorization': 'Bearer $accessToken'},\n ),\n );\n return response.data;\n } on DioError catch (e) {\n return e.response!.data;\n }\n }\n }That concludes the ApiClient class. Next, you'll build the UI for your Flutter application, making use of the methods you just created in the ApiClient class.
Your Flutter application will consist of four screens, which include:
\nLet’s begin by building the Registration Screen.
\nThe RegistrationScreen has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission, as shown in the code snippet below from the register.dart file.
//...\n @override\n Widget build(BuildContext context) {\n Scaffold(\n backgroundColor: Colors.blueGrey[200],\n body: Form(\n key: _formKey,\n child: SizedBox(\n width: size.width,\n height: size.height,\n child: Align(\n alignment: Alignment.center,\n child: Container(\n width: size.width * 0.85,\n padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),\n decoration: BoxDecoration(\n color: Colors.white,\n borderRadius: BorderRadius.circular(20),\n ),\n child: SingleChildScrollView(\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n const Center(\n child: Text(\n "Register",\n style: TextStyle(\n fontSize: 30,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n SizedBox(height: size.height * 0.05),\n TextFormField(\n validator: (value) =>\n Validator.validateEmail(value ?? ""),\n controller: emailController,\n keyboardType: TextInputType.emailAddress,\n decoration: InputDecoration(\n hintText: "Email",\n isDense: true,\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n SizedBox(height: size.height * 0.03),\n TextFormField(\n obscureText: _showPassword,\n validator: (value) =>\n Validator.validatePassword(value ?? ""),\n controller: passwordController,\n keyboardType: TextInputType.visiblePassword,\n decoration: InputDecoration(\n hintText: "Password",\n isDense: true,\n border: OutlineInputBorder(\n borderRadius: BorderRadius.circular(10),\n ),\n ),\n ),\n SizedBox(height: size.height * 0.06),\n Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Expanded(\n child: ElevatedButton(\n onPressed: _handleRegister,\n style: ElevatedButton.styleFrom(\n primary: Colors.indigo,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(10)),\n padding: const EdgeInsets.symmetric(\n horizontal: 40, vertical: 15)),\n child: const Text(\n "Register",\n style: TextStyle(\n fontSize: 20,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),\n ],\n ),\n ],\n ),\n ),\n ),\n ),\n ),\n ),\n );\n }\n //...In the onPressed callback of the ElevatedButton widget, you'll handle the validation of your form data.
If the form is validated, you pass your userData to the registerUser method from the ApiClient class for processing.
If the response is an error, you show a snackbar with the error message. Otherwise, the user is redirected to the Login Screen.
\n\n\nIn the following example, you've provided only a few user attributes as
\nuserData. To view the complete list of user attributes, please look at the body parameters of the User Registration API here.
Future<void> _handleRegister() async {\n if (_formKey.currentState!.validate()) {\n //show snackbar to indicate loading\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: const Text('Processing Data'),\n backgroundColor: Colors.green.shade300,\n ));\n\n //the user data to be sent\n Map<String, dynamic> userData = {\n "Email": [\n {\n "Type": "Primary",\n "Value": emailController.text,\n }\n ],\n "Password": passwordController.text,\n "About": 'I am a new user :smile:',\n "FirstName": "Test",\n "LastName": "Account",\n "BirthDate": "10-12-1985",\n "Gender": "M",\n };\n\n //get response from ApiClient\n dynamic res = await _apiClient.registerUser(userData);\n ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n //checks if there is no error in the response body.\n //if error is not present, navigate the users to Login Screen.\n if (res['ErrorCode'] == null) {\n Navigator.push(context,\n MaterialPageRoute(builder: (context) => const LoginScreen()));\n } else {\n //if error is present, display a snackbar showing the error messsage\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text('Error: ${res['Message']}'),\n backgroundColor: Colors.red.shade300,\n ));\n }\n }\n}The LoginScreen UI code is similar to the RegistrationScreen in that it also has two TextFormField widgets that serve as our email and password fields, as well as an ElevatedButton to handle event submission. So, for the sake of brevity, I’ll be leaving out the LoginScreen UI code and focusing mainly on the code to be written in the ElevatedButton onPressed callback in the login_screen.dart file.
//...\n //...\n Future<void> loginUsers() async {\n if (_formKey.currentState!.validate()) {\n //show snackbar to indicate loading\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: const Text('Processing Data'),\n backgroundColor: Colors.green.shade300,\n ));\n\n //get response from ApiClient\n dynamic res = await _apiClient.login(\n emailController.text,\n passwordController.text,\n );\n ScaffoldMessenger.of(context).hideCurrentSnackBar();\n\n //if there is no error, get the user's accesstoken and pass it to HomeScreen\n if (res['ErrorCode'] == null) {\n String accessToken = res['access_token'];\n Navigator.push(\n context,\n MaterialPageRoute(\n builder: (context) => HomeScreen(accesstoken: accessToken)));\n } else {\n //if an error occurs, show snackbar with error message\n ScaffoldMessenger.of(context).showSnackBar(SnackBar(\n content: Text('Error: ${res['Message']}'),\n backgroundColor: Colors.red.shade300,\n ));\n }\n }\n }\n //...The code snippet above is a method that first validates the form before passing the email and password values to the login method from the ApiClient class for handling.
If the response is successful, you obtain the user’s access_token from the response data and pass it over to the HomeScreen. Otherwise, you display a snackbar with the error message that occurred.
Then, you pass the loginUsers method you created above to the onPressed property of the ElevatedButton widget in the LoginScreen, as shown below.
ElevatedButton(\n onPressed: loginUsers, //<--\n style: ElevatedButton.styleFrom(\n primary: Colors.indigo,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(10)),\n padding: const EdgeInsets.symmetric(\n horizontal: 40, vertical: 15)),\n child: const Text("Login",\n style: TextStyle(\n fontSize: 20,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),Next, you need to provide a screen that reveals the user's profile data when they successfully log in, and the HomeScreen is there to do so.
The HomeScreen displays the user’s profile details using a FutureBuilder widget that accepts a future getUserData.
Future<Map<String, dynamic>> getUserData() async {\n dynamic userRes;\n userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n return userRes;\n }The getUserData method above is used to retrieve details of a user by passing in the access_token obtained earlier from the LoginScreen to the ApiClient getUserProfileData method.
To display the result of your getUserData method on our screen, use a FutureBuilder widget. The code snippet below shows how to use the FutureBuilder to get the results of the getUserData future in the home.dart file.
class HomeScreen extends StatefulWidget {\n final String accesstoken;\n const HomeScreen({Key? key, required this.accesstoken}) : super(key: key);\n @override\n State<HomeScreen> createState() => _HomeScreenState();\n }\n class _HomeScreenState extends State<HomeScreen> {\n //instance of ApiClient class\n final ApiClient _apiClient = ApiClient();\n\n //get user data from ApiClient\n Future<Map<String, dynamic>> getUserData() async {\n dynamic userRes;\n userRes = await _apiClient.getUserProfileData(widget.accesstoken);\n return userRes;\n }\n @override\n Widget build(BuildContext context) {\n var size = MediaQuery.of(context).size;\n return Scaffold(\n backgroundColor: Colors.white,\n body: SizedBox(\n width: size.width,\n height: size.height,\n child: FutureBuilder<Map<String, dynamic>>(\n future: getUserData(), //<---\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n if (snapshot.connectionState == ConnectionState.waiting) {\n return Container(\n height: size.height,\n width: size.width,\n color: Colors.blueGrey,\n child: const Center(\n child: CircularProgressIndicator(),\n ),\n );\n }\n //get results from snapshot\n String fullName = snapshot.data!['FullName'];\n String firstName = snapshot.data!['FirstName'];\n String lastName = snapshot.data!['LastName'];\n String birthDate = snapshot.data!['BirthDate'];\n String email = snapshot.data!['Email'][0]['Value'];\n String gender = snapshot.data!['Gender'];\n return Container(\n width: size.width,\n height: size.height,\n color: Colors.blueGrey.shade400,\n child: SingleChildScrollView(\n physics: const BouncingScrollPhysics(),\n //...\n //...Finally, let's add the logout feature.
\nAdd an ElevatedButton widget to the HomeScreen.
TextButton(\n onPressed: (){},\n style: TextButton.styleFrom(\n backgroundColor: Colors.redAccent.shade700,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(5)),\n padding: const EdgeInsets.symmetric(\n vertical: 15, horizontal: 25)),\n child: const Text('Logout',\n style: TextStyle(color: Colors.white), ),\n ),\n ),On pressing the button, you'll call the logout method on the ApiClient class and pass in the access_token value, and then you route the user to the LoginScreen.
TextButton(\n onPressed: () async {\n await _apiClient.logout(widget.accesstoken);\n Navigator.pushReplacement(\n context, MaterialPageRoute(builder: (context) => const LoginScreen()));\n },\n style: TextButton.styleFrom(\n backgroundColor: Colors.redAccent.shade700,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.circular(5)),\n padding: const EdgeInsets.symmetric(\n vertical: 15, horizontal: 25)),\n child: const Text('Logout',\n style: TextStyle(color: Colors.white),\n ),\n ),![\"Preview](\"/968d860d94a6f5f996e709e22dcec84a/demo-project.gif\")
LoginRadius provides high-level, secure, and well-documented APIs to ease the implementation of authentication and user identity management. This tutorial has discussed LoginRadius's benefits and how to use the LoginRadius APIs to handle user authentication and registration in a Flutter application.
\nThe complete source code of the demo application is available on GitHub.
\n","frontmatter":{"date":"February 17, 2022","updated_date":null,"description":"Developing Flutter apps? Learn how to implement user authentication and registration in your Flutter applications quickly with LoginRadius APIs.","title":"Flutter Authentication: Implementing User Signup and Login","tags":["Authentication","Flutter","API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/52db7c04cea4a2d8a1eab648a60d075d/ee604/user-authentication-for-flutter-apps.png","srcSet":"/static/52db7c04cea4a2d8a1eab648a60d075d/69585/user-authentication-for-flutter-apps.png 200w,\n/static/52db7c04cea4a2d8a1eab648a60d075d/497c6/user-authentication-for-flutter-apps.png 400w,\n/static/52db7c04cea4a2d8a1eab648a60d075d/ee604/user-authentication-for-flutter-apps.png 800w,\n/static/52db7c04cea4a2d8a1eab648a60d075d/f3583/user-authentication-for-flutter-apps.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Yusuf Ahmed","github":null,"avatar":null}}}},{"node":{"excerpt":"Authentication and authorization are critical in every software application to secure user data and allow access to trusted users. In some…","fields":{"slug":"/engineering/guest-post/loopback-rest-api-authentication/"},"html":"Authentication and authorization are critical in every software application to secure user data and allow access to trusted users. In some cases, implementing authentication and authorization is not an easy process.
\nHowever, LoopBack 4 offers an authentication package @loopback/authentication that helps secure your application's API endpoints. It provides custom authentication strategies and a @authenticate decorator that requires minimal boilerplate code.
\nAccording to the LoopBack 4 documentation:
\n\n\nLoopBack is a flexible, open source Node.js and TypeScript framework built on Express. It helps you quickly develop APIs and microservices built on backend systems such as databases and SOAP or REST services.
\n
Loopback provides several features that allow you to build your application with less boilerplate code.
\nJSON Web Token (JWT) is an open standard defined by Internet Engineering Task Force (IETF) in RFC 7519.
\nIt is a standard used for securely transferring claims between two parties over the internet. It uses JSON Web Signature (JWS) for the secure transfer of claims and eliminates the possibility of tampering. Accordingly, JWTs can be signed with either a secret (HMAC technique) or a public/private key pair (RSA or ECDSA).
\nIn simple words, it is used for authentication and secure information sharing. A JWT token is made up of three components that are separated by three dots:
\n\n\nYou can learn more about JWT and its best practices here.
\n
This tutorial is a hands-on demonstration. To follow along, be sure you have the following in place:
\nTo start building your LoopBack REST API, first install LoopBack CLI, which provides the quickest method to create a LoopBack 4 project that follows best practices.
\nUse the command below to install the Loopback CLI globally:
\nnpm i -g @loopback/cliYou can grab a cup of coffee while you wait for the installation to complete. Then open your command line, create an AuthWithLooback folder, and change the directory to the AuthWithLooback folder with commands below:
mkdir AuthWithLooback\ncd AuthWithLoobackSo, you've installed Loopback CLI and created a project directory. Let's run the following command to create a LoopBack project:
\nlb4 appSelect the options as in the following screenshot to complete the prompts.
\nAfter completing the prompts, LoopBack will configure the TypeScript compiler and install all the required dependencies. Change directory to the auth-with-loopback folder.
cd auth-with-loopbackYou've successfully created your Loopback application. Now, let’s create a Model to store the news details with the command below:
\nlb4 modelSelect the options as in the following screenshot to complete the prompts.
\nAfter the date_created property definition, press the enter key to exit the prompt.
Loopback will create a NewsModel file in the src/models — the folder where NewsModel will be defined.
Next, you need to create a data source to connect to your preferred database. For demonstration, this tutorial connects to a MongoDB database.
\nRun the following command in your terminal to create a data source:
\n lb4 datasourceSelect the options as in the following screenshot to complete the prompts.
\nAfter completing the prompts, LoopBack will create the News file in the src/datasource folder.
Then, create a Repository for CRUD operations of your NewModel with the command below:
\nlb4 repositoryAfter completing the prompts, LoopBack will create the NewsModelRepository file in the src/repository folder.
Select NewsDatasource as the data source, NewsModel as the model for generating the repository, and DefaultCrudRepository as the base repository class.
Your selection for the prompts shall look like the screenshot below.
\nAfter completing the prompts, LoopBack will create the NewsModelRepository file in the src/repository folder.
Lastly, create a controller for the NewsModel you created with the command below:
lb4 controllerYour selection for the prompts should look like the screenshot below.
\nAfter completing the prompts, LoopBack will create the NewsController file in the src/controller folder. So far, your project structure, omitting the node_modules folder, should look as follows.
📦auth-with-loopback
\n┣ 📂public
\n┃ ┗ 📜index.html
\n┣ 📂src
\n┃ ┣ 📂tests
\n┃ ┃ ┣ 📂acceptance
\n┃ ┃ ┃ ┣ 📜home-page.acceptance.ts
\n┃ ┃ ┃ ┣ 📜ping.controller.acceptance.ts
\n┃ ┃ ┃ ┗ 📜test-helper.ts
\n┃ ┃ ┗ 📜README.md
\n┃ ┣ 📂controllers
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┣ 📜news-controller.controller.ts
\n┃ ┃ ┗ 📜ping.controller.ts
\n┃ ┣ 📂datasources
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news.datasource.ts
\n┃ ┣ 📂models
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news-model.model.ts
\n┃ ┣ 📂repositories
\n┃ ┃ ┣ 📜README.md
\n┃ ┃ ┣ 📜index.ts
\n┃ ┃ ┗ 📜news-model.repository.ts
\n┃ ┣ 📜application.ts
\n┃ ┣ 📜index.ts
\n┃ ┣ 📜migrate.ts
\n┃ ┣ 📜openapi-spec.ts
\n┃ ┗ 📜sequence.ts
\n┣ 📜.dockerignore
\n┣ 📜.eslintignore
\n┣ 📜.eslintrc.js
\n┣ 📜.gitignore
\n┣ 📜.mocharc.json
\n┣ 📜.prettierignore
\n┣ 📜.prettierrc
\n┣ 📜.yo-rc.json
\n┣ 📜DEVELOPING.md
\n┣ 📜Dockerfile
\n┣ 📜README.md
\n┣ 📜package-lock.json
\n┣ 📜package.json
\n┗ 📜tsconfig.json
Now that you have the Model setup, run the server, and add some custom data to the News collection in MongoDB.
\n #start the server\n npm run startThe above command will start the TypeScript compiler, which will build the project and check for possible errors. If everything goes well with the code, you should see the output on the terminal, as follows:
\nNext, open your favorite browser and navigate to http://localhost:3000. You should see an output as follows:
Now, click on the explorer link, where you can make requests to your LoopBack application. On the explorer page, locate the post endpoint and add some custom data to the news collection by clicking the try it out button with the data below on the request body.
{\n "title": "Upgrade to Loopback V4",\n "body": "The developers of Loopback urges the V3 users to upgrade to V4 as soon as possible",\n "date_created": "2021-12-14T00:57:43.197Z"\n}Then, click the execute button to run the query.
You can add as many records as you like to experiment with the endpoints. The important thing to note here is that the endpoints are not protected. Anyone may create, read, update, and delete records.
\nIn a moment, this tutorial explains how to secure the endpoints so that only logged-in users can access them.
\nTo begin, install LoopBack authentication and authentication-jwt, as follows:
npm i --save @loopback/authentication @loopback/authentication-jwtTo protect the application, you'll implement user authentication and authorization, which implies that only logged-in users will be able to access your APIs. You'll create two endpoints in the User controller:
\n/Signup endpoint: To handle user’s sign up./Login endpoint: To handle user’s login.You’ll start with the signup controller to enable users to create an account. Create an empty controller with the command below:
\n lb4 controllerYour selection for the prompts should be as follows:
\nThen, open the src/controllers/user.controller.ts file, and import the required modules with the following code snippet:
import { authenticate, TokenService } from '@loopback/authentication';\n import {\n Credentials,\n MyUserService,\n TokenServiceBindings,\n User,\n UserRepository,\n UserServiceBindings,\n } from '@loopback/authentication-jwt';\n import { inject } from '@loopback/core';\n import { model, property, repository } from '@loopback/repository';\n import {\n get,\n getModelSchemaRef,\n post,\n requestBody,\n SchemaObject,\n } from '@loopback/rest';\n import { SecurityBindings, securityId, UserProfile } from '@loopback/security';\n import { genSalt, hash } from 'bcryptjs';\n import _ from 'lodash';\n ........Next, set up your user credential objects, and verify the user credentials using the UserService, injecting MyUserService into the authentication-jwt extension.
@model()\n export class CreateUser extends User {\n @property({\n type: 'string',\n required: true,\n })\n password: string;\n }\n\n const UserSchema: SchemaObject = {\n type: 'object',\n required: ['email', 'password'],\n properties: {\n email: {\n type: 'string',\n format: 'email',\n },\n password: {\n type: 'string',\n minLength: 6,\n },\n },\n };\n\n export const RequestBody = {\n description: 'The input of login function',\n required: true,\n content: {\n 'application/json': { schema: UserSchema },\n },\n };\n\n export class UserController {\n constructor(\n @inject(TokenServiceBindings.TOKEN_SERVICE)\n public jwtService: TokenService,\n @inject(UserServiceBindings.USER_SERVICE)\n public userService: MyUserService,\n @inject(SecurityBindings.USER, { optional: true })\n public user: UserProfile,\n @repository(UserRepository) protected userRepository: UserRepository,\n ) { }\n ..........Finally, you'll build your signup endpoint, which will listen to POST requests. Here, you shall save the hashed version of the user's password in the database to keep it safe.
\n @post('/signup', {\n responses: {\n '200': {\n description: 'User',\n content: {\n 'application/json': {\n schema: {\n 'x-ts-type': User,\n },\n },\n },\n },\n },\n })\n async signUp(\n @requestBody({\n content: {\n 'application/json': {\n schema: getModelSchemaRef(CreateUser, {\n title: 'NewUser',\n }),\n },\n },\n })\n newUserRequest: CreateUser,\n ): Promise<User> {\n const password = await hash(newUserRequest.password, await genSalt());\n const savedUser = await this.userRepository.create(\n _.omit(newUserRequest, 'password'),\n );\n\n await this.userRepository.userCredentials(savedUser.id).create({ password });\n\n return savedUser;\n }\n .........Now that you've set up the signup endpoint, create the login endpoint so that registered users may log in to the API.
\nUsing the code snippet below, set up the login route in the src/controllers/user.controller.ts file. In the event of a successful log-in, a token is sent to the user.
@post('/signin', {\n responses: {\n '200': {\n description: 'Token',\n content: {\n 'application/json': {\n schema: {\n type: 'object',\n properties: {\n token: {\n type: 'string',\n },\n },\n },\n },\n },\n },\n },\n })\n async signIn(\n @requestBody(RequestBody) credentials: Credentials,\n ): Promise<{ token: string }> {\n const user = await this.userService.verifyCredentials(credentials);\n const userProfile = this.userService.convertToUserProfile(user);\n const token = await this.jwtService.generateToken(userProfile);\n return { token };\n }Perhaps, you can show the currently logged-in user by adding a /whoami endpoint.
In the src/controllers/user.controller.ts file, get the details of the currently logged-in user using the code snippet below. Users should access this endpoint only when they are logged in.
@authenticate('jwt')\n @get('/whoami', {\n responses: {\n '200': {\n description: 'Return current user',\n content: {\n 'application/json': {\n schema: {\n type: 'string',\n },\n },\n },\n },\n },\n })\n async whoAmI(\n @inject(SecurityBindings.USER)\n loggedInUserProfile: UserProfile,\n ): Promise<string> {\n return loggedInUserProfile[securityId];\n }Now, open src/application.ts and bind the authentication components to your application class. First, import Loopback AuthenticationComponent, JWTAuthenticationComponent, and NewsDataSource from your datasources using the following code snippet:
//...\nimport { AuthenticationComponent } from "@loopback/authentication"\nimport {\n JWTAuthenticationComponent,\n UserServiceBindings,\n} from "@loopback/authentication-jwt"\nimport { NewsDataSource } from "./datasources"\n//...Then, mount the jwt authentication system and bind your NewsDataSource to the UserService data source.
//...\n// ------ ADD SNIPPET INSIDE THE CONTRUCTOR BLOCK ---------\nthis.component(AuthenticationComponent)\nthis.component(JWTAuthenticationComponent)\nthis.dataSource(NewsDataSource, UserServiceBindings.DATASOURCE_NAME)\n//...Finally, add the authenticate action in the Sequence. Also, modify the error when authentication fails to return status code 401 (Unauthorized). Open the src/sequence.ts file and add the code snippet below:
import { FindRoute, InvokeMethod, MiddlewareSequence, ParseParams, Reject, RequestContext, Send, SequenceActions, SequenceHandler } from '@loopback/rest';\n import {\n AuthenticateFn,\n AuthenticationBindings,\n AUTHENTICATION_STRATEGY_NOT_FOUND,\n USER_PROFILE_NOT_FOUND,\n } from '@loopback/authentication';\n import { inject } from "@loopback/core"\n export class MySequence implements SequenceHandler {\n constructor(\n @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,\n @inject(SequenceActions.PARSE_PARAMS)\n protected parseParams: ParseParams,\n @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,\n @inject(SequenceActions.SEND) protected send: Send,\n @inject(SequenceActions.REJECT) protected reject: Reject,\n @inject(AuthenticationBindings.AUTH_ACTION)\n protected authenticateRequest: AuthenticateFn,\n ) { }\n async handle(context: RequestContext) {\n try {\n const { request, response } = context;\n const route = this.findRoute(request);\n //call authentication action\n await this.authenticateRequest(request);\n // Authentication successful, proceed to invoke controller\n const args = await this.parseParams(request, route);\n const result = await this.invoke(route, args);\n this.send(response, result);\n } catch (error) {\n if (\n error.code === AUTHENTICATION_STRATEGY_NOT_FOUND ||\n error.code === USER_PROFILE_NOT_FOUND\n ) {\n Object.assign(error, { statusCode: 401/* Unauthorized */ });\n }\n this.reject(context, error);\n return;\n }\n }\n }So far, you've implemented user authentication for your API. Now, protect your News endpoints so that only authenticated users can access those routes.
\nOpen the src/controllers/news.controller.ts file, and import authenticate from jwt authentication.
import { authenticate } from "@loopback/authentication"Then on each of the endpoints in your news controller, add @authenticate('jwt') before the NewsController class, which will protect all the routes in NewsController.
//...\n @authenticate('jwt')\n //...Perhaps, you may not want to protect all the routes, simply add the @authenticate('jwt') method before the route you wish to protect. You can protect the POST route as follows:
@authenticate('jwt')\n @post('/news-models')\n @response(200, {\n description: 'NewsModel model instance',\n content: { 'application/json': { schema: getModelSchemaRef(NewsModel) } },\n })\n async create(\n @requestBody({\n content: {\n 'application/json': {\n schema: getModelSchemaRef(NewsModel, {\n title: 'NewNewsModel',\n exclude: ['id'],\n }),\n },\n },\n })\n newsModel: Omit<NewsModel, 'id'>,\n ): Promise<NewsModel> {\n return this.newsModelRepository.create(newsModel);\n }You've implemented user authentication in your REST API and secured the routes against unauthorized users. Let's put your application to the test. Press CTRL-C to exit the server and restart it with the following command:
npm startIf you open the explorer page, you should see the UserController endpoints.
If you try to execute any query on NewsController, you get a 404 (Unauthorized) error. So, sign up by clicking the /signup endpoint — and log in from the /users/login endpoint. On successful login, copy the token, scroll to the top, click on the Authorize button, and paste the token.
Unfortunately, passwords are no longer a wise choice for developers to ensure secure and seamless authentication. Let’s see why:
\nBefore talking about the solution in detail, let’s get deeper into the problem and see what are the common cyber-attacks faced by password-based authentication.
\nThe following is the list of common password attacks. It also explains what additional efforts developers need to put in to fight these cyber-attacks and protect user data:
\nTo protect against this attack, developers have to develop security features like suspending or locking user accounts on multiple subsequent attempts to log in with an incorrect password.
\nTo protect against this attack, developers have to ensure that users are not using insecure or previously breached passwords.
\nTo protect against this attack, developers need to introduce 2FA (two-factor authentication). Stakes are high in this case as a lot depends on how users take security measures.
\nThat is where developers have to be cautious, keeping all the data-in-transit encrypted.
\nLuckily getting rid of passwords from the authentication mechanism can address all the above-stated problems. Eliminating passwords from internet space is certainly not a 1-day thing, but the responsibility lies with developers.
\nDevelopers should introduce more secure and user-friendly authentication methods to their application users such as magic links, single sign-on (SSO), biometric, hardware-based authentication.
\nIt does the user authentication based on the \"possession factor.\" That is where developers find passwordless authentication trustworthy, as the authentication uses a phone number, email ID, or authenticator app to cater to an OTP, one-time link, or code respectively to verify the user.
\nThrough this, developers can improve the user experience of the application and reduce risk while minimizing the total cost of storing the login credentials. Users will employ the one-time link or OTP only if they are logged into their email or possess the phone for SMS. This assures the developer a better security.
\nAlmost all websites demand some form of authentication to access their content and features. Single sign-on authentication has become a standard authentication method for website logins.
\nDevelopers can integrate the single sign-on feature in their web applications to facilitate users to securely authenticate multiple apps and websites by leveraging one set of login credentials.
\nThrough SSO, developers can implement multi-factor authentication implicitly. It uses a federated identity management architecture that relies on open standard protocols to exchange identity and authentication information among these protocols. That makes implementing the security easier for developers.
\nBiometrics refers to the user's physical characteristics allowing them to identify uniquely on a digital platform. Instead of typing letters, numbers, and symbols (for passwords), biometric authentication uses biometric systems to calculate and estimate the user's physical attributes. Facial recognition, tiny impressions made by fingerprints, and vocal cadence are well-known biometric authentication techniques.
\nIt is gaining traction because developers do not have to maintain a separate database of usernames and passwords since the authentication takes place from the user device rather than the application's database.
\nMost in-house developers and smart device vendors leverage this authentication technique to avoid password authentication. This authentication mostly uses QR codes or link-based login approaches. Here the one-time link or the QR code uniquely generates the verification process that helps initiate the user login process without any password.
\nIn this approach, the authentication uses a dedicated plug-and-run physical device belonging to the authorized user. These versatile security devices help users log in to desktops, Wi-Fi, websites, and other applications.
\nFIDO2 devices are touch-sensed USB sticks that enable hardware authentication and follow the FIDO Alliance standards and specifications. Leveraging this authentication mechanism is a plus point as the developers do not have to maintain a secure database for the login credentials.
\nFor decades, password-based authentication has been the mainstay for security and user verification. On average, almost all online users have 20 to 30 login credentials for different applications and sites. Password logins have become so common that changing the authentication trend and adopting a new authentication approach will take time.
\nAll the alternatives mentioned in this article can help minimize using passwords to a significant level. It's time developers should seriously ponder the problems that passwords can create for themselves and opt for reasonable alternatives as per the situation, requirements, or policy standards.
\nPasswords are becoming more like a liability rather than a security asset. Hence, to get rid of them, developers are leveraging other means of authentication that are more reliable and less susceptible to security breaches and threats.
\nWorried about efforts involved in implementing these alternative authentication methods from scratch? LoginRadius identity platform comes with these authentication techniques so that developers do not have to implement them from scratch in their applications to provide alternate authentication.
\n","frontmatter":{"date":"January 31, 2022","updated_date":null,"description":"Authentication remains at the core of any application with user data and accounts. It ensures that only the authorized person is accessing the data and account. So far, Password-based authentication has been prevalent that developers mostly use.","title":"When Can Developers Get Rid of Password-based Authentication?","tags":["Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ec99b982c7381590d9835756acbaf197/ee604/password-dev.png","srcSet":"/static/ec99b982c7381590d9835756acbaf197/69585/password-dev.png 200w,\n/static/ec99b982c7381590d9835756acbaf197/497c6/password-dev.png 400w,\n/static/ec99b982c7381590d9835756acbaf197/ee604/password-dev.png 800w,\n/static/ec99b982c7381590d9835756acbaf197/f3583/password-dev.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.