DEV Community: Dipesh Jaiswal

Multi‑Account AWS Deployments with Serverless Framework

Dipesh Jaiswal — Thu, 12 Jun 2025 15:04:31 +0000

Managing deployments across multiple AWS accounts often comes with credential headaches - constantly switching profiles, forgetting --aws-profile, or accidentally deploying to the wrong environment. In this post, I’ll show you how to streamline the process by mapping stages to AWS CLI profiles directly in your serverless.yml, making deployments pain-free and consistent.

⚙️ Why This Approach Matters

No more CLI flags: Skip --aws-profile on every command, just use --stage and you're done.
Safer workflows: Avoid accidentally deploying to production from your dev environment.
Reusable pattern: Set it once, add new environments in seconds, ideal for scaling teams and CI/CD pipelines.

✅ Prerequisites

Multiple AWS CLI profiles set up, each targeting the intended AWS account:

   aws configure --profile dev
   aws configure --profile prod

Serverless Framework CLI installed:

   npm install -g serverless
   sls create --template aws-nodejs

🧩 Configure `serverless.yml`

Step 1: Map deployment stages to profiles

custom:
  profiles:
    dev: dev
    prod: prod
    test: test

Step 2: Use dynamic interpolation for `provider.profile`

provider:
  name: aws
  runtime: nodejs18.x
  region: ap-south-1
  stage: ${opt:stage, 'dev'}
  profile: ${self:custom.profiles.${self:provider.stage}}

${opt:stage, 'dev'} uses CLI --stage, defaulting to dev.
${...custom.profiles...} fetches the matching AWS profile.
The result? No more need to type --aws-profile.

🔍 Full Example

service: multi-account-service
frameworkVersion: '~4.4.0'

custom:
  profiles:
    dev: dev
    prod: prod
    test: test

provider:
  name: aws
  runtime: nodejs18.x
  region: ap-south-1
  stage: ${opt:stage, 'dev'}
  profile: ${self:custom.profiles.${self:provider.stage}}

functions:
  handler:
    handler: handler.main
    events:
      - httpApi:
          path: /
          method: ANY

🛠 Deploying Is Simple

sls deploy            # → uses profile "dev"
sls deploy --stage prod  # → uses "prod"
sls deploy --stage test  # → uses "test"

💡 Best Practices

Keep credentials private: Never commit them to Git.
CI/CD-friendly: Define AWS_PROFILE via environment variables or secrets.
Team guidance Document the mapping in your README for clarity.
Easily extendable Add more stages like staging, qa, or uat as you grow.

📝 Next Steps

This pattern is live in our projects, and it’s saved us from accidental deployments and excessive CLI flags. Give it a go in your own project, and if it works for you, let me know! I’m planning to follow up with posts on CI/CD pipelines, credentials rotation, and advanced Serverless best practices.

Mastering Buttons in React: A Deep Dive into Interactivity Design🧑‍🎨

Dipesh Jaiswal — Fri, 10 Feb 2023 05:27:49 +0000

In the world of web development, React is a popular JavaScript library used to create interactive user interfaces. One of the most essential components in any React application is buttons, which allow users to take action or navigate to different pages. This blog post aims to provide a comprehensive guide to buttons in React, covering everything from basic button creation to advanced customization and styling.

To Click or Not to Click: A Div vs. Button vs. Anchor Tag Debate

When it comes to creating clickable elements in HTML, the answer to which tag to use - an anchor tag, a button tag, or something else entirely - can be a nuanced one. In 99% of cases, it is highly recommended to avoid using a div for a clickable element. Here's why:

Divs are not focusable, meaning that the tab key won't move the focus to a div as it would for other buttons on your device.
Screen readers and other assistive technologies don’t recognize divs as clickable elements, making them inaccessible to some users.
Divs don't translate certain key inputs, such as space bars or return keys, into clicks when focused.

While it's possible to work around some of these issues by adding extra attributes, like:

// ❗️Trying to make a div *mostly* behave like a button...
export function MyDivButton() {
  function onClick() { ... }
  return (
    <div
      className="my-button"
      tabindex="0" // Makes the div focusable
      role="button" // Hint to screen readers this is clickable
      onClick={onClick}
      onKeydown={(event) => {
        // Listen to the enter and space keys when focused and call the
        // click handler manually
        if (event.key === "Enter" || event.key === "Space") {
          onClick()
        }
      }}
    >
      Div Button
    </div>
  )
}

But it can quickly become a tedious process that may not solve all the problems.

Button to the Rescue: A Better Solution

Thankfully, there's a more straightforward solution in most cases: the button tag. The button tag behaves as you would expect, acting just like any other button on your device and being recognized by users and accessibility tools. It's focusable, accessible, responsive to keyboard input, and has a compliant focus state styling.

Styling buttons, however, can be a challenge. Browsers often add their own styling to button elements, making it difficult to apply your own styles. To overcome this, you can either reset properties line by line or use the all: unset property to remove all special styling and then add your own focus state with an outline of your brand color with sufficient contrast.

It's important to note that any button inside a form is treated as a “submit” button by default and will submit the form when clicked.

function MyForm() {
  return (
    <form onSubmit={...}>
      ...
      <button type="submit">Submit</button>
      {/* ❗️Clicking "Cancel" will also submit the form! */}
      <button onClick={...}>Cancel</button>
    </form>
  )
}

To prevent this behavior, you can add the type="button" attribute to the button element, making it a regular clickable element rather than a submit button.

Links to Other Pages: A Different Story

One big exception to our rule is using buttons for links to other pages:

// ❗️Making a 'button' behave like a link
function MyButtonLink() {
  return (
    <button
      type="button"
      onClick={() => {
        location.href = "/"
      }}
    >
      Don't do this
    </button>
  )
}

There are several issues with using buttons for click events to link to pages:

They are not crawlable, affecting SEO negatively.
Users can't open the link in new tabs or windows, such as with cmd/ctrl-click or right-click "open in new tab".

For these reasons, it's best to avoid using buttons for navigation. That's where the anchor tag (a) comes in:

// ✅ Good Way
function MyLink() {
  return (
    <a href="/">
      Do this for links
    </button>
  )
}

Anchor tags offer all the benefits of buttons - being accessible, focusable, and responsive to keyboard input - without extra styling.

But before you start using anchor tags for everything clickable, it's important to note that an anchor tag without an href value no longer behaves like a button.

So, let’s make sure to use buttons for buttons and anchors for links.

In conclusion, the choice between using a button, anchor, or div for your clickable elements in React can be a tricky one, but with a little bit of know-how and understanding, you can create interactive and accessible user interfaces with ease. Whether you're looking to style a basic button or navigate between pages, React has got you covered. So go ahead, unleash your creativity, and make your applications truly come to life!

React Email First Look 🎉

Dipesh Jaiswal — Mon, 30 Jan 2023 06:25:12 +0000

At some point it feels like every developer ends up writing some kind of emailing system. It could be something as simple as a single email for somebody who fills out a form or a more complex flow for a SAS product. But whatever the use case, if you've ever tried to write an email from scratch in 2023, you know it's a pain in the butt. It's just not an enjoyable experience. Well, what if you could write emails with react and TypeScript?

Currently in beta, React Email allows you to write emails with the same syntax as React. This means you can easily create and edit email templates using JSX.

Lets get started 🚀

1. Project Setup

First start with setting up the project in your system.

Paste the following code in your terminal:

npx create-email@latest

This will create a new folder called react-email-starter with a few email templates.
Now, change your current directory by:

cd react-email-starter

Install dependencies by running:

npm install

Alright, now spin it up for server by:

npm run dev

If everything is done right you will see the following screen on "http://localhost:3000/"

2. Generating Email with React!

Lets start editing the pre build template by the awesome "React Email Team".
Although you can also explorer more templates or create your own custom one by following the documentation.
I am going with the vercel one:
Paste following code:

import { Button } from '@react-email/button';
import { Container } from '@react-email/container';
import { Head } from '@react-email/head';
import { Hr } from '@react-email/hr';
import { Html } from '@react-email/html';
import { Img } from '@react-email/img';
import { Link } from '@react-email/link';
import { Preview } from '@react-email/preview';
import { Section } from '@react-email/section';
import { Text } from '@react-email/text';
import * as React from 'react';

export default function Email() {
  return (
    <Html>
      <Head />
      <Preview>Join my team</Preview>
      <Section style={main}>
        <Container style={container}>
          <Section style={{ marginTop: '32px' }}>
            <Img
              src="https://dipeshjaiswal.com/static/logos/dipeshjaiswal_logo.png"
              width="40"
              height="37"
              alt="Vercel"
              style={logo}
            />
          </Section>
          <Text style={h1}>
            Join <strong>My Awesome</strong> Project <strong></strong>
          </Text>
          <Text style={text}>Hello zenorocha,</Text>
          <Text style={text}>
            <strong>John Doe</strong> (
            <Link href="mailto:youremail@domain.com" style={link}>
            youremail@domain.com
            </Link>
            ) has invited you to the <strong>My Project</strong> team.
          </Text>
          <table
            style={spacing}
            border={0}
            cellPadding="0"
            cellSpacing="10"
            align="center"
          >
            <tr>
              <td style={center} align="left" valign="middle">
                <Img
                  style={avatar}
                  src="/static/myemoji.png"
                  width="64"
                  height="64"
                />
              </td>
              <td style={center} align="left" valign="middle">
                <Img
                  src="/static/vercel-arrow.png"
                  width="12"
                  height="9"
                  alt="invited you to"
                />
              </td>
              <td style={center} align="left" valign="middle">
                <Img
                  style={avatar}
                  src="https://dipeshjaiswal.com/static/logos/dipeshjaiswal_logo.png"
                  width="64"
                  height="64"
                />
              </td>
            </tr>
          </table>
          <Section style={{ textAlign: 'center' }}>
            <Button
              pX={20}
              pY={12}
              style={btn}
              href="https://domain.com/teams/invite"
            >
              Join the team
            </Button>
          </Section>
          <Text style={text}>
            <br />
            or copy and paste this URL into your browser:{' '}
            <Link
              href="https://domain.com/teams/invite"
              target="_blank"
              style={link}
              rel="noreferrer"
            >
              https://domain.com/teams/invite
            </Link>
          </Text>
          <Hr style={hr} />
          <Text style={footer}>
            This invitation was intended for{' '}
            <span style={black}>zenorocha</span>.This invite was sent from{' '}
            <span style={black}>204.13.186.218</span> located in{' '}
            <span style={black}>São Paulo, Brazil</span>. If you were not
            expecting this invitation, you can ignore this email. If you are
            concerned about your account's safety, please reply to this email to
            get in touch with us.
          </Text>
        </Container>
      </Section>
    </Html>
  );
}

const main = {
  backgroundColor: '#ffffff',
  margin: '0 auto',
};

const container = {
  border: '1px solid #eaeaea',
  borderRadius: '5px',
  margin: '40px auto',
  padding: '20px',
  width: '465px',
};

const logo = {
  margin: '0 auto',
};

const h1 = {
  color: '#000',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '24px',
  fontWeight: 'normal',
  textAlign: 'center' as const,
  margin: '30px 0',
  padding: '0',
};

const avatar = {
  borderRadius: '100%',
};

const link = {
  color: '#067df7',
  textDecoration: 'none',
};

const text = {
  color: '#000',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '14px',
  lineHeight: '24px',
};

const black = {
  color: 'black',
};

const center = {
  verticalAlign: 'middle',
};

const btn = {
  backgroundColor: 'rgb(0,199,255)',
  borderRadius: '5px',
  color: '#fff',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '50px',
  textDecoration: 'none',
  textAlign: 'center' as const,
};

const spacing = {
  marginBottom: '26px',
};

const hr = {
  border: 'none',
  borderTop: '1px solid #eaeaea',
  margin: '26px 0',
  width: '100%',
};

const footer = {
  color: '#666666',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '12px',
  lineHeight: '24px',
};

Output will look like:

You can always play with your favourite colors & theme in your favourite framework React😉.

3. Let's Setup Mailing Integration

Once, you are happy with your email its time to start sending it to the user.
I will be using Nodemailer but you can check other as well in documentation.
First, install the following dependencies:

npm install @react-email/render nodemailer

Now, Create a new file and paste the following code:

import * as React from 'react';
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import MyCustomEmail from './vercel-invite-user';

const transporter = nodemailer.createTransport({
  host: 'smtp.ethereal.email',
  port: 587,
  secure: false,
  auth: {
    user: 'my_user',
    pass: 'my_password',
  },
});

const emailHtml = render(<MyCustomEmail />);

const options = {
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'My Awesome Project',
  html: emailHtml,
};

transporter.sendMail(options);

The render() function returns your custom React Email template in HTML format, which can be understood by mailing servers like Gmail or Outlook.
You can then pass this HTML to your mailer, in this case, Nodemailer Transporter.
And thats all you need to create a beautiful Emails with React.

4. Preview your Email

If you come over this way, you can actually send yourself a preview of this.
Click on the "Send" button in the top right corner and type in your own email.
Click Send and you'll receive a preview of your email in your inbox, and that's all you need to create beautiful emails with React.

In conclusion, React Email allows developers to create beautiful and functional emails with the power of React and TypeScript. By using the pre-built templates or creating custom designs, developers can easily create emails that are both visually appealing and functional. With the added benefit of being able to preview and send emails directly from the application, React Email makes the process of building emails a much more enjoyable and efficient experience. Give React Email a try and see the difference it can make in your email development process.

Master JavaScript Array Methods with One Simple Image

Dipesh Jaiswal — Sat, 21 Jan 2023 05:19:31 +0000

Are you tired of scrolling through pages of documentation just to find the perfect array method for your JavaScript code? Look no further! In this blog post, we're going to take the complexity out of arrays and simplify the major methods into one easy-to-digest image. Whether you're a beginner or an experienced developer, this guide will give you a better understanding of the array methods available in JavaScript and how to use them. So, buckle up and get ready to say goodbye to confusion and hello to mastering arrays like a pro.

With the above image, you can see the major array methods and their corresponding descriptions all in one place. And in the following sections, we will take a deep dive into each one individually. Let's get started!🚀

1. push():

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Code Example:

let arr = [1, 2, 3];
let count = arr.push(4);
console.log(arr); // [1, 2, 3, 4]
console.log(count); // 4

2. pop():

The pop() method removes the last element from an array and returns that element.

Code Example:

let arr = [1, 2, 3];
let popped = arr.pop();
console.log(arr); // [1, 2]
console.log(popped); // 3

3. shift():

The shift() method removes the first element from an array and returns that removed element.

Code Example:

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // [2, 3]
console.log(first); // 1

4. unshift():

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Code Example:

let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

5. map():

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Code Example:

let arr = [1, 2, 3];
let newArr = arr.map((item) => {
  return item * 2;
});
console.log(newArr); // [2, 4, 6]

6. filter():

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Code Example:

let arr = [1, 2, 3];
let newArr = arr.filter((item) => {
  return item > 1;
});
console.log(newArr); // [2, 3]

7. reverse():

The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

Code Example:

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

8. at():

The at() method returns the value at the given index in an array. Unlike the bracket notation, it will return undefined for out-of-bounds indices instead of an empty string.

Code Example:

let arr = [1, 2, 3];
console.log(arr.at(1)); // 2
console.log(arr.at(5)); // undefined

9. slice():

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included) where begin and end represent the index of items in that array. The original array will not be modified.

Code Example:

let numbers = [2, 3, 5, 7, 11, 13, 17];

// create another array by slicing numbers from index 3 to 5
let newArray = numbers.slice(3, 6);
console.log(newArray); // [ 7, 11, 13 ]

In conclusion, arrays in JavaScript are a powerful and versatile data structure that allows developers to store, manipulate, and retrieve data with ease. I hope that this guide has helped you unlock the true potential of array methods. But there are many more array methods that we didn't cover in this blog, but don't worry! We'll be diving into more in-depth and advanced topics in future blogs, so stay tuned!

Peace out. ✌

Spotify Authentication using Client(React) and Server(ExpressJs)

Dipesh Jaiswal — Tue, 27 Apr 2021 11:01:12 +0000

Hey gorgeous reader,

In this blog, I will demonstrate how to implement Spotify Authentication and retrieving Users' Data with ReactJs and ExpressJs. To implement this, we will be using a third-party library called spotify-web-api-node.

Let's go 🚀,

After you hit Enter, you should see your default browser open. Although I suggest Google Chrome because of its development tools making life easier, it’s still your personal preference, but we cannot guarantee development quality with other browsers.
If you did everything correctly, you must see the following screen on your browser window.
If you do not see the browser tab open

http://localhost:3000

Then go to the above URL.
This is the Welcome screen of React. If you reached here then congrats.🥳

Server Setup,

To set up the server, first, change the current directory from client to server by entering the following code in the terminal:

cd ../server

Then create a server.js file into the server folder and run the following in terminal to initialize the package file:

npm init -y

Install dependencies:

npm i express spotify-web-api-node cors

Now enter the following into server.js,

const express = require('express')
const app = express()
const port = 8000

app.get('/', (req, res) => {
  console.log('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Now that we have our server setup, now we can start it. In the terminal type the following command:

node server.js

If you see 'Hello World!' in your terminal, then congrats your server is running.🥳

2. Setting up Spotify Web API:

To get access to the Spotify Web API so that we can get a lot of details from the API, we must create an API credential at Spotify Developers Website. To do that, use this link to go to Spotify Developer Dashboard. Here’s the full URL

https://developer.spotify.com/dashboard/

Then you have to press login and login using your Spotify account, although, you can use Google, Facebook, or Apple for third-party agents as logging in to Spotify.

You must be redirected to the Dashboard and now you should see something like this:

If you are here, great! Just press the “Create an App” button so that we can generate our Spotify API credentials.

You will now see a popup box like this:

Give your app a name, in this case, I will use “spotify-clone-medium” and give it a description. Make sure you agree to Spotify’s Terms of Service before pressing “Create”.

You should now see a screen similar to this:

Here, copy the Client ID and save it somewhere, we will need it in the app. We would require the Client Secret but you need to keep it a secret and should not be shared in any circumstances.

Now, click on the Edit Settings button. You should see something like this:

Here, in the Redirect URIs field, enter our development server address which is http://localhost:3000/ (do not forget the slash in the end). After you enter click on the Add button beside it and finally, hit Save.

3. Designing the Login Page:

Now we have everything set up properly, we can go ahead and actually start coding and make our Login Page!

To do that, let’s make a file named Login.js in the client/src folder. Once you are in the file, use rfce snippet from ES7 Snippets to make a component. Also, we will be using a Material-UI hook named 'makeStyles' for the styling. If you don't want to use Material-UI then you can create a separate Login.css and write all the styling in that file and when you are done, import it into the Login.js.

To use { makeStyles } from Material-UI we need to import it first.

Also, I have chosen a Spotify logo that fits the background. Also, I've given some styling to our Login component so that it looks nice with the help of makeStyles. You can copy the following to the Login.js :

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    login: {
        display: 'grid',
        placeItems: 'center',
        height: '100vh',
        backgroundColor: 'black',

        '& img':{
            width: '50%'
        },

        '& a':{
            padding: '20px',
            borderRadius: '99px',
            backgroundColor: '#1db954',
            fontWeight: 600,
            color: 'white',
            textDecoration: 'none',
        },

        '& a:hover':{
            backgroundColor:' white',
            borderColor: '#1db954',
            color: '#1db954',
        }
    },
});
function Login() {
    const classes = useStyles()
    return (
        <div className={classes.login}>
            <img src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg" alt="Spotify-Logo"/>
            <a href="#">LOGIN WITH SPOTIFY</a>
        </div>
    )
}

export default Login

Let’s go back to App.js and render this component. To do that, go to App.js, import the component, and use it inside the parent div. Your App.js should now look like this:

import React from "react";
import "./App.css";
import Login from "./Login";

function App() {
  return (
    <div className="app">
      <Login />
    </div>
  );
}

export default App;

So now, if you go to your browser, you should see something like this:

If you see the above screen, congrats you have made the Login page design🥳. Now let’s make a Spotify Configuration File that will help us Login using Spotify Web API.

4. Working on Spotify Configuration File:

We will use a Spotify Configuration file so that all our Spotify API logic stays at a place and in an organized manner. So let’s make a new file called spotify.js and have the following contents and then we will run through the code and see how it works.

const authEndpoint = "https://accounts.spotify.com/authorize";
const redirectUri = "https://localhost:3000/";
const clientId = "YourClientId";

const scopes = [
  "streaming",
  "user-read-email",
  "user-read-private",
];

export const loginUrl = `${authEndpoint}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scopes.join(
  "%20"
)}`;

// loginUrl = "https://accounts.spotify.com/authorize?client_id=YourClientId&response_type=code&redirect_uri=https://localhost:3000/&scope=streaming%20user-read-email%20user-read-private"

Here’s the logic behind the Spotify configuration file:

The authEndpoint is the URL where we need to authenticate using Spotify. All Spotify Authentication requests must be passed through this URL.
The redirectUri is the one which we gave in the Spotify Web API settings, this states where to take back the user if the Spotify login was successful.
The clientId is the Client ID provided to you by the Spotify Web API and you need to mention it here.
scopes are basically permissions that you need to ask Spotify for. More such permissions are available on Spotify API Documentation about scopes.
The loginUrl is the final URL that needs to be called to authorize a user for our Spotify Clone app. This URL contains the Client ID and all the permissions so that Spotify knows about our app and allows user authentication.

Now let’s bring this loginUrl into our Login component(login.js) so that we can enable our users to Login through the app. So, your code should now look at this and should link to the loginUrl.

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import { loginUrl } from "./spotify";

const useStyles = makeStyles({
    login: {
        display: 'grid',
        placeItems: 'center',
        height: '100vh',
        backgroundColor: 'black',

        '& img':{
            width: '50%'
        },

        '& a':{
            padding: '20px',
            borderRadius: '99px',
            backgroundColor: '#1db954',
            fontWeight: 600,
            color: 'white',
            textDecoration: 'none',
        },

        '& a:hover':{
            backgroundColor:' white',
            borderColor: '#1db954',
            color: '#1db954',
        }
    },
});
function Login() {
    const classes = useStyles()
    return (
        <div className={classes.login}>
            <img src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg" alt="Spotify-Logo"/>
            <a href={loginUrl}>LOGIN WITH SPOTIFY</a>
        </div>
    )
}

export default Login

Now, if you try to click on LOGIN WITH SPOTIFY on your app in the browser, you will see you are redirected to Spotify asking to login and then requesting authorization. Once you authorize, you find yourself back on the Login Page, but this time, you see a code in the URL bar:

We need that code to generate the Access Token that we will use to authenticate the User. To do that, we need to take code out of the URL bar. Also, create a Dashboard.js in src, so whenever we log in we will be redirected to Dashboard with the value of code passing via props.

Dashboard.js:

import React from "react";

const Dashboard = ({ code }) => {
  return (
    <div>
            {code}        
    </div>
  );
};

export default Dashboard;

Now, let’s write some logic to get the value of code from the URL.
So, go back to App.js and add the following code:

import React from "react";
import "./App.css";
import Login from "./Login";

// 'URLSearchParams(window.location.search)' will get url string after the '?' & .get() will get the code value from the url
const code = new URLSearchParams(window.location.search).get('code')

function App() {
  return (
    <div className="app">
      {code ? <Dashboard code={code} /> : <Login />}
    </div>
  );
}

export default App;

In the above, we are getting the value of code from the URL and passing it to the Dashboard.

Logic Behind the code:

To access the value of the query(the string after '?' in URL) inside the browser, using JavaScript, we have a special API called URLSearchParams(), supported by all modern browsers.
Note: don’t pass the full URL as a parameter to URLSearchParams(), but only the query string part of the URL, which you access using window.location.search.

In the case of:

https://test.com/hello?name=roger

window.location.search is equal to the string ?name=roger.

get('code') function will get the value of the code.

Now if you click the Login button, you will be redirected to Dashboard with the code printed on the screen.
If you can see the code value then congrats, we can now use this to generate the AccessToken.🥳

5. Setting up the Server:

Now, we will set up the Server that will generate the accessToken with the help of the code that we will receive from the client.

We will be using a library named spotify-web-api-node, by which we can call the Spotify API in a much easier way.

Copy the following code into the sever.js and then we will run through the code and see how it works.

const express = require('express')
const cors = require('cors')
const spotifyWebApi = require('spotify-web-api-node')

const app = express()
const port = 8000

app.use(cors()) // To handle cross-origin requests
app.use(express.json()); // To parse JSON bodies

const credentials = {
  clientId: Your CLIENT_ID,
  clientSecret: Your CLIENT_SECRET,
  redirectUri: http://localhost:3000/,
};

app.get('/', (req, res) => {
  console.log('Hello World!')
})

app.post('/login', (req,res) => {
//  setup 
    let spotifyApi = new spotifyWebApi(credentials)

//  Get the "code" value posted from the client-side and get the user's accessToken from the spotify api     
    const code = req.body.code

    // Retrieve an access token
    spotifyApi.authorizationCodeGrant(code).then((data) => {

        // Returning the User's AccessToken in the json formate  
        res.json({
            accessToken : data.body.access_token,
        }) 
    })
    .catch((err) => {
        console.log(err);
        res.sendStatus(400)
    })

})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Here's the logic behind the above code,

First, we have setup our credentials, so that we can use the spotifyWebApi(it has many functions that make calling Spotify API easy).
Then, we have created a post route '/login' that will request the code value from the client and send the accessToken in response.
.authorizationCodeGrant() is a function that will return the data, which contains - accessToken, refreshToken, and expiresIn, generated with the help of the code. For now, we only need accessToken.

6. Creating custom Hook for handling Authorization:

Now, we will create a custom hook named useAuth for handling our Authorization logic.

The useAuth hook will receive the accessToken from the server that we created.

First create a useAuth.js file in client/src folder.
Copy the following code:

import { useEffect, useState } from "react";
import axios from "./axios";

export default function useAuth(code) {
  const [accessToken, setAccessToken] = useState();

  useEffect(() => {
    axios
      .post("http://localhost:8000/login", { code })
      .then((response) => {

        // If success then cut the code string from the URL and execute the other thing
        window.history.pushState({}, null, "/");

        console.log(response.data);
        setAccessToken(response.data.accessToken);

      })
      .catch(() => {
        //   If fail redirect to home page - Login page
        window.location = "/";
      });
  }, [code]);

  return accessToken
}

Here's the logic:

We are using the axios library for requesting the server.
We have written our login in a useEffect with the dependency of code, so whenever our code value changes, this useEffect will run.
We are making a post request at the '/login' route to our server with the code value.
The server in response will send the accessToken, which we store in the state with the help of useState.

So in a Nutshell, useAuth will request the server with the code value, and in response, the server will return the accessToken of the User.

You can try printing the accessToken to check whether you have received it or not.

Now, you can use this accessToken to retrieve data of the User from Spotify.😁

7. Getting the User's Data (Optional):

Want to see the User's Information as they log in? Don't worry we will cover that here. We will use spotify-web-api-node, for getting the user's data.

First copy the following code into the Dashboard.js :

import React, { useEffect } from "react";
import useAuth from "./useAuth";
import SpotifyWebApi from "spotify-web-api-node";

// Setting the spotifyApi, so that we can use it's functions
const spotifyApi = new SpotifyWebApi({
  clientId: "7b215911d14245089d73d78055353cb2",
});

const Dashboard = ({ code }) => {
  const accessToken = useAuth(code);

  useEffect(() => {
    if (!accessToken) return;

    // Setting Up the spotifyApi with AccessToken so that we can use its functions anywhere in the component without setting AccessToken value again & again. 
    spotifyApi.setAccessToken(accessToken);

    // Get user details with help of getMe() function
    spotifyApi.getMe().then(data => {
      console.log(data);
    })
  }, [accessToken]);

  return (
    <div>
    {code}        
    </div>
  );
};

export default Dashboard;

Here's the logic:

We are setting up the spotifyWebApi with the Client ID.
We are using the useAuth hook to get the accessToken of the user.
We have written our login in a useEffect with the dependency of accessToken, so whenever our accessToken value changes, this useEffect will run.
.getMe() function will return the data, which contains the User's Details.

So, If you inspect your browser window and look at the console, you will see the user's details. 😄
If you made it till here then congrats 🥳, You have set up the Spotify Authentication.

Also, I've created a Spotify Clone website, So do check it out😄:
Website
GitHub
Demo Of The Project

Peace out. ✌

DEV Community: Dipesh Jaiswal

Multi‑Account AWS Deployments with Serverless Framework

⚙️ Why This Approach Matters

✅ Prerequisites

🧩 Configure `serverless.yml`

Step 1: Map deployment stages to profiles

Step 2: Use dynamic interpolation for `provider.profile`

🔍 Full Example

🛠 Deploying Is Simple

💡 Best Practices

📝 Next Steps

Mastering Buttons in React: A Deep Dive into Interactivity Design🧑‍🎨

To Click or Not to Click: A Div vs. Button vs. Anchor Tag Debate

Button to the Rescue: A Better Solution

Links to Other Pages: A Different Story

React Email First Look 🎉

Master JavaScript Array Methods with One Simple Image

Spotify Authentication using Client(React) and Server(ExpressJs)

Table Of Contents:

1. Setting up the Initial Project Structure:

2. Setting up Spotify Web API:

3. Designing the Login Page:

4. Working on Spotify Configuration File:

5. Setting up the Server:

6. Creating custom Hook for handling Authorization:

7. Getting the User's Data (Optional):

DEV Community: Dipesh Jaiswal

Multi‑Account AWS Deployments with Serverless Framework

⚙️ Why This Approach Matters

✅ Prerequisites

🧩 Configure serverless.yml

Step 1: Map deployment stages to profiles

Step 2: Use dynamic interpolation for provider.profile

🔍 Full Example

🛠 Deploying Is Simple

💡 Best Practices

📝 Next Steps

Mastering Buttons in React: A Deep Dive into Interactivity Design🧑‍🎨

To Click or Not to Click: A Div vs. Button vs. Anchor Tag Debate

Button to the Rescue: A Better Solution

Links to Other Pages: A Different Story

React Email First Look 🎉

Master JavaScript Array Methods with One Simple Image

Spotify Authentication using Client(React) and Server(ExpressJs)

Table Of Contents:

1. Setting up the Initial Project Structure:

2. Setting up Spotify Web API:

3. Designing the Login Page:

4. Working on Spotify Configuration File:

5. Setting up the Server:

6. Creating custom Hook for handling Authorization:

7. Getting the User's Data (Optional):

🧩 Configure `serverless.yml`

Step 2: Use dynamic interpolation for `provider.profile`