The CIAM solution ensures fewer employees can access customer data and handle it. This further reduces the chance of accidental data leaks and secures consumer data privacy. Some of the global standards it adheres to include the GDPR in the EU and the CCPA in California.
\nLoginRadius, a customer identity management system, supports global regulatory compliance in the fight against data breaches, essential for delivering zero friction customer experience.
\nThe Bottom Line
\nBusinesses embarking on a digital transformation journey shouldn’t ignore the importance of securing their customers’ PII, especially if they’re dealing with heaps of consumer information.
\nOn the other hand, incorporating stringent security mechanisms to secure PII would build trust in the global markets and decrease the chances of a data breach.
\nHence, the consumer data privacy and security plan should comply with the rapid development of technology and the increasing cyber-attacks. Organizations should consider investing in compliance with the latest regulations to future-proof their consumer data protection plan.
\n\n","frontmatter":{"date":"March 10, 2022","updated_date":null,"description":"Before organizations gear up to offer stringent security measures to their clients, it’s crucial to understand the fundamental difference between personal data and personally identifiable information (PII).","title":"Personal Information and PII - What’s the Difference?","tags":["data security","identity management","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.492537313432836,"src":"/static/c70a7660af89ad1e9632ac59a4fe64f3/33aa5/pii.jpg","srcSet":"/static/c70a7660af89ad1e9632ac59a4fe64f3/f836f/pii.jpg 200w,\n/static/c70a7660af89ad1e9632ac59a4fe64f3/2244e/pii.jpg 400w,\n/static/c70a7660af89ad1e9632ac59a4fe64f3/33aa5/pii.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Vishal Sharma","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial, I’ll talk about adding authentication in a Svelte application using LoginRadius Authentication APIs. You'll understand…","fields":{"slug":"/engineering/guest-post/authenticating-svelte-apps/"},"html":"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:
\n- \n
- create forms in Svelte; \n
- add reactivity to it; \n
- configure routing for our Svelte app; and, \n
- setup protected routes for authenticated users. \n
You'll also learn how to consume REST APIs in a Svelte app using Fetch API and update user information in your Svelte store.
\nWhat is Svelte?
\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.
\nSvelte Project Demo
\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!
\nSetup a Svelte App
\nLet's start by creating a new Svelte project and adding some boilerplate code.
\nCreate a New Svelte Project
\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-navigatorConfigure Environment Variable Support
\nYou 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.
Create Files and Folders
\nBesides the initial set of files, your project will have the following directory structure:
\n![\"Directory](\"/b127258daa14eecbda3f07a8bccce890/Directory-Structure-Svelte-App.png\")
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.
\nAdd Project Styles
\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.
Global Data Store for Authenticated User
\nYour 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 App Component Boilerplate
\nThe 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.
The Login Component
\nLet's head over to the /src/Login.svelte file to create the Login Page.
Create Login Form
\nHere'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.
Login Form Field Bindings and Handlers
\nInside 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.
\nThe Signup Component
\nHead over to the /src/Signup.svelte file to create your Signup Page.
Create Signup Form
\nSimilar 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.
\nSignup Form Field Bindings and Handlers
\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\")
The Home Component
\nLet'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.
Setup LoginRadius
\nThe next step is to set up LoginRadius, so you can start using its Authentication APIs from your Svelte App.
\nCreate LoginRadius Account
\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.
\nGet LoginRadius API Configurations
\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\")
Add API Credentials as Environment Variables
\nHead 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.envConsume Environment Variables in Svelte Components
\nFinally, 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.
\nIntegrate LoginRadius API
\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.
Integrate Signup API
\nInside 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.
\nSignup API Request on Signup Form Submission
\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}Handle API Response
\nInside 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...Disable Submit Button
\nYou 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...Show Signup Success and Error
\nLastly, 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.
\nIntegrate Login API
\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.
\nSetup Routes
\nYou'll use the svelte-navigator package that you previously installed to configure routing in your app.
Add Routing
\nFirst, 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.
Programmatic Redirection
\nRemember, 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.
\nAdd Protected/Private Routes
\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\")
Conclusion
\nI 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":"Since we all now agree that digital transformation is not a choice, we might as well embrace the change and learn how to best adopt it. But…","fields":{"slug":"/growth/7-mistakes-companies-make-during-digital-transformation/"},"html":"Since we all now agree that digital transformation is not a choice, we might as well embrace the change and learn how to best adopt it. But it’s easier said than done, isn’t it?
\nAccording to a report by McKinsey, out of all the companies that adopt digital transformation, only 30% taste success. Why do you think this is the case?
\nAny type of transformation is a challenge. But digital transformation takes it up a notch. It involves every aspect of your business — people, processes, infrastructure, and customers. There’s simply a lot of room for errors that you cannot afford to make.
\nLet’s take a detailed look at some of these common mistakes and what you can do to avoid them.
\nTop 7 Mistakes to Avoid During Digital Transformation
\n1. Setting up unrealistic goals and expectations.
\nBefore starting your digital transformation journey, it’s imperative to have a plan, just like all things life. What is it that you want to achieve? Is it to increase your revenue? Is it to reduce time in doing manual tasks? Is it to streamline your process?
\nOnce you decide your goal, don’t be overly optimistic and set unrealistic timelines to meet these goals. Transitioning to a digital business model is an ongoing process that will take its time in aligning with your strategy. Understand that gaps won’t be filled overnight.
\nYou need to take baby steps. Define milestones and set interim goals to check the impact of the transformation over time. The effect of digital transformation will always take months, and sometimes even years to appear. So instead of expecting too much within the go, have patience and set realistic expectations to reap long-term benefits.
\n2. Misinterpreting digitization.
\nTo fully understand and even leverage digital transformation, you need to figure out how and why they exist in the first place. According to a recent survey, 57% of the companies misinterpreted digital transformation, assuming that it meant moving to a paperless framework.
\nSo, what is digital transformation?
\nDigital Transformation is the use of digital technologies to create and modify businesses processes and culture to create better customer experiences and meet the dynamic market conditions.
\nNow that you know what digital transformation is, you’ll realize that its scope is much wider, and an act that can change the dynamics of a business environment for good.
\nHaving said that, remember that digitization is not a magic wand that will magically solve problems pertaining to your products or services nor is it the robotic villain that is trying to steal jobs. It is meant to improve business processes and customer experiences.
\nTo do so, you need to clearly assess its future impact and strategically integrate it into your current ecosystem. The adoption of new technologies may bring changes in the way you work, and change the pace at which you work, but it cannot fix things out of its expertise.
\n3. Neglecting the digital transformation opportunities.
\nIt’s already established that digital transformation is inevitable and sooner or later companies will have to get on board. However, despite the popularity and benefits of digital transformation, leaders tend to ignore digital transformation opportunities. They’re hesitant to incur the costs associated with it, or bring about change in business processes, and prepare the employees for the same.
\nBut leaders need to think long-term about the competitive advantages they can avail through digital transformation. These are just initial hindrances that you can overcome. One way to do that is by hiring leaders who are familiar with what digital transformation is and how companies can best leverage them.
\nThe idea of transformation always stems from the tech-savvy leaders who envision building an environment for the workforce of the future. They can cultivate the thought process and communicate why the need for change is essential for the organization to achieve new heights of success.
\nResearch says that the success of the digital transformation is more likely if there is the right level of leadership commitment and if leaders have the know-how of digital technologies.
\n4. Not preparing your in-house team for the foreseeable change.
\nAs mentioned before, digital transformation impacts all your stakeholders, the biggest one being your employees. They’ll feel intimidated and insecure when there are massive changes to the way they do their work.
\nOver 80% of employees feel anxious about the new technologies and changes in business processes. And that is okay. Resistance to change is an innate human nature but it doesn’t mean we cannot overcome it. It becomes crucial for the management to inculcate a culture of digital transformation for employees to follow.
\nEncourage employees to learn and train them thoroughly on the new technologies and processes. Try explaining the benefits of the transformation for them and have an approachable attitude. You can also identify early adopters amongst employees who can aid others with getting acquainted and uplift their morale.
\n5. Ignoring automation for internal processes.
\nUltimately you’d want to implement new technologies to increase revenue and provide better customer experiences. But if your internal transformation is unsuccessful, it is likely that your customer-facing transformation will fail too.
\nOrganizations that have transformed successfully have recognized that digital transformation calls for decentralized decision making, and greater reliance on operational processes. Transformation begins from the inside. This means automating how your team collaborates, and how you make the transition from traditional business models.
\nTo set up automation for internal processes, you can implement tools for human resource functions. You can adopt online employee training tools and communication. You can even integrate tools for conducting hygiene audits in finance and marketing. This can enhance employee productivity, and lead to better resource allocation and management.
\n6. Not accepting that digitization is dynamic.
\nThe current times have been an indication that we live in a world of rapidly changing problems. Even the companies who underwent digital transformation were confused as to how to deal with remote teams and empty offices and still keep the customer experience intact.
\nThis just proves that digital transformation is never a destination, as most companies believe. It is an ongoing process, where you’re continuously on your toes to meet the challenges of the rapidly evolving market conditions.
\nThe goal here is to become a dynamic enterprise that can respond to changes quickly, keeping digital transformation at the core.
\n\n","frontmatter":{"date":"March 07, 2022","updated_date":null,"description":"Today, most companies realize that technology presents an opportunity to transform their business models and products. But, not many have any clue about the mistakes they make while adopting.","title":"7 Mistakes Companies Make During Digitization And Their Fixes","tags":["digital transformation","identity management","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7391304347826086,"src":"/static/3b9d9428305dd69d7d22475caaf60852/33aa5/digitize-mistakes.jpg","srcSet":"/static/3b9d9428305dd69d7d22475caaf60852/f836f/digitize-mistakes.jpg 200w,\n/static/3b9d9428305dd69d7d22475caaf60852/2244e/digitize-mistakes.jpg 400w,\n/static/3b9d9428305dd69d7d22475caaf60852/33aa5/digitize-mistakes.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Hazel Raoult","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.
\nWe’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.
\nThe goal? Having them spend less time searching and more time building.
\nWhat’s New and Improved on the LoginRadius Website?
\nLoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.
\nHere’s a closer look at what’s new and why it’s important:
\nA Developer-Friendly Dark Theme
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.
\nThe new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.
\nSo, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.
\nClear Categorization for LoginRadius Capabilities
\n![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:
\n- \n
- Authentication: Easily understand how to choose the right login method, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code. \n
- Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts. \n
- User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences. \n
- High Performance & Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions. \n
- Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs. \n
This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.
\nDeveloper-First Navigation
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.
\nThe new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.
\nQuick Understanding of Integration Benefits
\n![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.
\nOur platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.
\nOver to You Now!
\nCheck out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.
\nDo not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!
\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":282,"currentPage":48,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}