DEV Community: Sudhir

GitHub Actions to VPS: Zero-Trust with Tailscale

Sudhir — Fri, 23 Jan 2026 18:38:38 +0000

Deploying to private VPS servers from GitHub Actions typically requires exposing SSH ports or maintaining complex VPN configurations. Tailscale's zero-trust networking eliminates these security risks by creating ephemeral, encrypted connections between GitHub-hosted runners and your infrastructure.

This guide shows how to connect GitHub Actions to a private VPS using Tailscale's OAuth-based authentication, following the principle of least privilege.

Architecture Overview

When a GitHub Actions workflow runs, the Tailscale GitHub Action installs the Tailscale client on the GitHub runner, creating an ephemeral Tailscale node that joins your tailnet. This ephemeral node receives a tag-based identity (tag:app-ci) that identifies its role as a CI/CD runner. Access to resources is granted based on ACL rules matching this tag. After the workflow completes, the ephemeral node is automatically removed.

The ephemeral node is the Tailscale client running on the GitHub runner. It's tagged with tag:app-ci to identify its role, and ACL rules grant this tag access to your VPS (tag:app-server). All traffic is encrypted via WireGuard, and your VPS never needs public-facing ports.

Tailscale Ephemeral Nodes, WireGuard Encryption

Prerequisites

Tailscale account with Owner, Admin, or Network admin permissions
GitHub repository with admin access
VPS running Tailscale with appropriate tags
At least one configured tag in your tailnet

Setting up Tailscale on a Server, Using Tags

Step 1: Configure Tailscale OAuth Client

Create an OAuth client in the Tailscale admin console. This is preferred over auth keys because it provides automatic cleanup and better security isolation.

Tailscale OAuth Clients

Required OAuth Scopes (principle of least privilege):
Configured in Trust credentials settings in Tailscale admin console

devices:core
devices:core:read
devices:posture_attributes
devices:posture_attributes:read
devices:routes:read
device_invites:read
policy_file:read
dns:read
api_access_tokens:read
auth_keys
oauth_keys
users:read
services

Store the OAuth Client ID and Secret securely—you'll add them to GitHub Secrets in the next step.

Step 2: Configure GitHub Secrets

Add the following secrets to your GitHub repository:

TS_OAUTH_CLIENT_ID: Your Tailscale OAuth Client ID
TS_OAUTH_SECRET: Your Tailscale OAuth Client Secret
VPS_HOST: Tailscale hostname or IP of your VPS (e.g., vps-name.tailnet-name.ts.net)
VPS_USER: SSH user for VPS access

Also, configure a repository variable:

TS_CI_RUNNER_TAG: The tag assigned to ephemeral nodes (e.g., tag:app-ci)

References: GitHub Encrypted Secrets, GitHub Variables

Step 3: GitHub Actions Workflow Configuration

Add the Tailscale GitHub Action to your workflow before any steps that need VPS access:

- name: Setup Tailscale
  uses: tailscale/github-action@v4
  with:
    oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
    oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
    tags: ${{ vars.TS_CI_RUNNER_TAG }}

Complete Example (deployment workflow):

name: Deploy to VPS

on:
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Tailscale
        uses: tailscale/github-action@v4
        with:
          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
          tags: ${{ vars.TS_CI_RUNNER_TAG }}

      - name: Deploy via Ansible
        working-directory: infrastructure/ansible
        env:
          VPS_HOST: ${{ secrets.VPS_HOST }}
          VPS_USER: ${{ secrets.VPS_USER }}
        run: |
          ansible-playbook playbooks/deploy.yml

After the Tailscale step, your workflow can access the VPS using its Tailscale hostname or IP. The ephemeral node is automatically logged out and removed when the workflow completes.

Step 4: Tailscale ACL Configuration

Configure your Tailscale ACL to grant the CI runner tag access to your VPS tag. Here's a minimal configuration:

{
  "tagOwners": {
    "tag:app-server": ["autogroup:admin"],
    "tag:app-ci": ["autogroup:admin"]
  },
  "grants": [
    {
      "src": ["tag:app-ci"],
      "dst": ["tag:app-server"],
      "ip": ["*"]
    }
  ],
  "ssh": [
    {
      "action": "accept",
      "src": ["tag:app-ci"],
      "dst": ["tag:app-server"],
      "users": ["autogroup:nonroot", "root"]
    }
  ]
}

Key Points:

tagOwners defines who can assign tags (admins in this case)
grants allows tag:app-ci to reach tag:app-server on all ports
ssh rules explicitly permit SSH access from CI runners to servers

Ensure your VPS is tagged with tag:app-server in the Tailscale admin console.

How It Works

Workflow starts: GitHub Action installs Tailscale client on the GitHub runner
Ephemeral node created: The Tailscale client authenticates with OAuth and creates an ephemeral node with tag:app-ci that joins your tailnet
Tag-based identity: The tag (tag:app-ci) identifies this node as a CI/CD runner
ACL enforcement: ACL rules grant the tag:app-ci access to tag:app-server resources
Connection established: The GitHub runner connects to the VPS via the Tailscale network using the VPS's Tailscale hostname or IP
Automatic cleanup: When the workflow completes, the ephemeral node logs out and is automatically removed from your tailnet

The ephemeral node is the Tailscale client running on the GitHub runner. It's not a separate machine—it's the Tailscale connection that enables the runner to reach your private VPS. Ephemeral nodes are pre-approved on tailnets with device approval enabled, eliminating manual approval steps.

Security Benefits

No public ports: VPS remains completely private
Least privilege: OAuth scopes and ACL tags limit access to the minimum required actions
Ephemeral access: Nodes exist only during workflow execution
Encrypted traffic: All communication uses WireGuard encryption
Zero-trust: Every connection is authenticated and authorized

References: Zero Trust Networking

Troubleshooting

If connectivity issues occur, use the ping parameter to verify connectivity:

- name: Setup Tailscale
  uses: tailscale/github-action@v4
  with:
    oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
    oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
    tags: ${{ vars.TS_CI_RUNNER_TAG }}
    ping: vps-name.tailnet-name.ts.net

Alternatively, test connectivity manually by adding the app-ci tag to your personal laptop and check if the tailscale ACL rules are working as expected

tailscale ping vps-name.tailnet-name.ts.net

Conclusion

Tailscale's GitHub Action provides a secure, zero-trust way to connect CI/CD pipelines to private infrastructure. By using OAuth-based authentication and tag-based ACLs, you eliminate the need for public-facing ports while maintaining granular access control.

The ephemeral node pattern ensures that access is temporary and automatically cleaned up, reducing the attack surface compared to persistent VPN connections or exposed SSH ports.

Bridging Cookie-Based SSR Authentication in TanStack Start with JWT-Protected NestJS APIs

Sudhir — Fri, 12 Dec 2025 08:33:24 +0000

The Problem

You have an SSR application using HTTP-only cookies for authentication, but your NestJS backend expects JWT tokens in Authorization headers.

The mismatch:

Cookies → SSR server ✅
Cookies → API server ❌
Headers → API server ✅

The solution: SSR server extracts JWT from cookies and forwards it in HTTP headers.

The Flow

Implementation

NestJS API (Standard JWT Guard)

@Controller("application")
export class ApplicationController {
  @Post(":jobId/upload-resume/:userId")
  @UseGuards(JwtAuthGuard) // Check if auth headers are present and valid
  async uploadResume(
    @Param("jobId") jobId: string,
    @Param("userId") userId: string,
    @Body() body: ResumeSubmitBody
  ) {
    // Implementation here
  }
}

JwtAuthGuard

// auth.guard.ts
@Injectable()
export class JwtAuthGuard implements CanActivate {
  constructor() {}

  async canActivate(context: ExecutionContext): Promise<boolean> {
    const request = context.switchToHttp().getRequest();
    const authHeader = request.headers.authorization;

    if (!authHeader || !authHeader.startsWith("Bearer ")) {
      throw new UnauthorizedException("No authorization token provided.");
      return false;
    }

    const token = authHeader.split(" ")[1];

    const { data: validationResult, error } = await validateJWT(token);
    if (error) {
      throw new UnauthorizedException("Failed to validate JWT");
      return false;
    }
    return true;
  }
}

SSR Server - Cookie Extraction

TanStack ServerFn:

// resume.serverFn.ts
export const submitResumeServerFn = createServerFn({ method: 'POST' })
  .middleware([
        authMiddleware, // protects the function and provides user context
        withApi // wrapper for fetch call to include authorization headers
    ])
  .inputValidator(SubmitResumeRequestSchema)
  .handler(async ({ data, context }) => {
    const { user, apiClient } = context

    return apiClient.fetch({
      jobId: data.jobId,
      userId: user.id,
      // ...
    })
  })
};

authMiddleware validates the session and provides access_token to context.

// auth.middleware.ts
export const authMiddleware = createMiddleware().server(async ({ next }) => {
  const user = await getUser();

  if (!user) {
    throw redirect({ to: "/signin" });
  }

  const supabaseClient = getSupabaseServerClient();
  const { data: sessionResult, error: sessionError } =
    await supabaseClient.auth.getSession();

  if (sessionError) return Promise.reject(sessionError);

  const accessToken = sessionResult.session?.access_token;

  return await next({
    context: {
      user,
      auth: { accessToken },
    },
  });
});

withApi Provides a wrapper for the fetch call to include authorization headers

export const withApi = createMiddleware().server(async ({ next, context }) => {
  const contextWithAuth = context as any;
  if (contextWithAuth?.auth?.accessToken) {
    // Include Authorization headers in outgoing request
    return await next({
      context: {
        apiClient: {
          fetch: (...args) =>
            fetch(...args, {
              headers: {
                Authorization: `Bearer ${contextWithAuth.auth.accessToken}`,
              },
            }),
        },
      },
    });
  }

  return await next({
    context: {
      apiClient: {
        fetch: fetch, // default fetch api
      },
    },
  });
});

Note: For this implementation, the order of middlewares in the controller matters. withApi middleware can

Key Takeaways

✅ HTTP-only cookies prevent XSS attacks
✅ SSR server safely bridges cookie auth → JWT headers
✅ Client code never touches JWT tokens
❌ Don't access HTTP-only cookies from client JavaScript
❌ Don't pass JWT tokens as props to client components

Cookie Configuration

// Set cookie with proper security attributes
setCookie("auth_token", jwt, {
  httpOnly: true, // Prevent JavaScript access
  secure: true, // HTTPS only
  sameSite: "strict", // CSRF protection
  maxAge: 60 * 60 * 24 * 7, // 7 days
});

Done!

The SSR server is your authentication bridge: it extracts JWTs from HTTP-only cookies and forwards them as headers to your API, keeping tokens away from client-side JavaScript.

JwtAuthGuard

// auth.guard.ts
@Injectable()
export class JwtAuthGuard implements CanActivate {
  constructor() {}

  async canActivate(context: ExecutionContext): Promise<boolean> {
    const request = context.switchToHttp().getRequest();
    const authHeader = request.headers.authorization;

    if (!authHeader || !authHeader.startsWith("Bearer ")) {
      throw new UnauthorizedException("No authorization token provided.");
      return false;
    }

    const token = authHeader.split(" ")[1];

    const { data: validationResult, error } = await validateJWT(token);
    if (error) {
      throw new UnauthorizedException("Failed to validate JWT");
      return false;
    }
    return true;
  }
}

SSR Server - Cookie Extraction

TanStack ServerFn:

// resume.serverFn.ts
export const submitResumeServerFn = createServerFn({ method: 'POST' })
  .middleware([
        authMiddleware, // protects the function and provides user context
        withApi // wrapper for fetch call to include authorization headers
    ])
  .inputValidator(SubmitResumeRequestSchema)
  .handler(async ({ data: formData, context }) => {
    const { user, apiClient } = context
    const file = formData.get('file') as File
    if (!(file instanceof File)) throw new Error('[file] not found')

    const conferenceFormFields = formDataToJson(formData, {})

    return apiClient.fetch({
      jobId: formData.get('jobId') as string,
      userId: user.id,
      file: file,
      // ...
    })
  })
};

authMiddleware validates the session and provides access_token to context.

// auth.middleware.ts
export const authMiddleware = createMiddleware().server(async ({ next }) => {
  const user = await getUser();

  if (!user) {
    throw redirect({ to: "/signin" });
  }

  const supabaseClient = getSupabaseServerClient();
  const { data: sessionResult, error: sessionError } =
    await supabaseClient.auth.getSession();

  if (sessionError) return Promise.reject(sessionError);

  const accessToken = sessionResult.session?.access_token;

  return await next({
    context: {
      user,
      auth: { accessToken },
    },
  });
});

withApi Provides a wrapper for the fetch call to include authorization headers

export const withApi = createMiddleware().server(async ({ next, context }) => {
  const contextWithAuth = context as any;
  if (contextWithAuth?.auth?.accessToken) {
    // Include Authorization headers in outgoing request
    return await next({
      context: {
        apiClient: {
          fetch: (...args) =>
            fetch(...args, {
              headers: {
                Authorization: `Bearer ${contextWithAuth.auth.accessToken}`,
              },
            }),
        },
      },
    });
  }

  return await next({
    context: {
      apiClient: {
        fetch: fetch, // default fetch api
      },
    },
  });
});

Note: For this implementation, the order of middlewares in the controller matters. withApi middleware can

Key Takeaways

✅ HTTP-only cookies prevent XSS attacks
✅ SSR server safely bridges cookie auth → JWT headers
✅ Client code never touches JWT tokens
❌ Don't access HTTP-only cookies from client JavaScript
❌ Don't pass JWT tokens as props to client components

Cookie Configuration

// Set cookie with proper security attributes
setCookie("auth_token", jwt, {
  httpOnly: true, // Prevent JavaScript access
  secure: true, // HTTPS only
  sameSite: "strict", // CSRF protection
  maxAge: 60 * 60 * 24 * 7, // 7 days
});

Done!

The SSR server is your authentication bridge: it extracts JWTs from HTTP-only cookies and forwards them as headers to your API, keeping tokens away from client-side JavaScript.

Emotional wellbeing at the day job

Sudhir — Mon, 23 Aug 2021 12:53:46 +0000

People experience a stream of emotions every day at work. It's important to be aware that you are constantly affected by it in some way. It could be the nature of your work, something that happened at home, or something else entirely. The point is to be mindful and observant about the signs.

That said, understanding human behaviour is a field of study best left to the experts. I've only shared a tiny facet of it, related to what I have noticed during my work.

Achievement → satisfaction → reward and recognition → growth.

This cycle of positive change is what most organizations hope their employees achieve. A good performance receives appreciation and opportunity for further development and exposure to bigger and better things. This, in turn, leads to further growth. This is the company slogan; it is reinforced as part of the culture and promoted religiously to new joiners. This is the supposed "secret recipe" to a happy and highly performant team that drives the organization towards success.

However, in practice, there are other more subtle aspects of emotion and motivation that affect a team's performance. Everyday events affect one's state of mind, and the dynamics of how emotion affects performance are complex but not trivial. This aspect of work-life is not openly expressed, and it becomes natural for other people to ignore it. Sometimes even the individual affected by these emotions isn't fully aware of what's happening,

why am I in a bad mood ?

If your work requires focus, attention to detail, or just sheer brainpower - you must appreciate the importance of the state of mind. The mind is one of your most valued assets. Everything that happens to you throughout the day affects you in some way. Like that slight irritation you feel when you need to decide, you need to wait on an important email for confirmation before proceeding. Or that feeling of frustration when you need to push out a critical fix but have to wait on the build job, which is stuck in the CICD queue for hours. Or the feeling of joy and satisfaction and slight bewilderment, after the code that you were working on for the past few days, finally works perfectly on the first try.

The key is to recognize how your emotional health is affected by everyday events.

Life is 90% what happens to you and 10% how you react to it.

Charles Swindoll

Everyday Rut

If a significant portion of someone's work is debugging or chasing defects. Or you are simply churning code which in the long run gets dull and mind-numbing. This makes it so much harder for inspiration to strike and kills out-of-the-box thinking. Never underestimate the destructive power of everyday rut. It is a slow-moving disease; you may not notice that you are in a rut for a long time.

Are you too comfortable with what you are doing every day? When was the last time you were challenged intellectually?
Are you aware of happenings in your industry? Are you stuck under a rock as the world passes you by?

Notice the signs.

A long day

You are working on a high-priority project, and you and your team have been tirelessly working for weeks.

After a long day with a packed calendar, your boss calls you up. You chat about how things are going with the project. You share your troubles and the day ends with casual banter about dinner plans. Sometimes, this kind of short and everyday interaction is an emotional outlet for people to better understand each other and build relations.

It is natural to think that you and the team would be exhausted by the intensity, the workload, and long hours. A good leadership team recognizes this, and can push back on demands from the business, and provides encouragement and support to the team in small ways. And even though the team will be exhausted, they will feel appreciated and happy with the experience.

When there is an atmosphere of positivity in the team, little things that may cause anxiety or distress are naturally filtered out. Negative emotions are like asteroids hurtling towards a planet. With a support circle, acting like the atmosphere, bursts of fear, doubt, anger, frustration, etc., are burnt off before they can do any significant damage.

And it's not just the bosses that have a role to play in creating this atmosphere. Friends or colleagues from work, the immediate people you work with, basically everyone that you interact with can play a part in making this happen.

So what's the point?

If someone is acting not their usual self, reach out, lend an ear, hear them out. Sometimes, talking about it can lead to further discussion and achieve a better grasp of what needs to be done, the obstacles, and so on...

And it's important to note that one can always take small steps to improve the situation; it doesn't always have to be a grand gesture. Little things like pizza night or gaming session, or just a "hello, how are you doing today", add up.

Stay safe, happy, and healthy.

Onboarding a new developer.

Sudhir — Tue, 22 Jun 2021 14:47:48 +0000

A good on-boarding can

help feel the developer welcomed in the team
provide the developer an overview about how the teams work, best practices, team culture etc...
help him find his way around his first project. It's hard to imagine someone new, will be able to figure out everything on his own.
give faces to names. A face to face engagement is good opportunity for the team to meet the new guy and vice-versa.

What is it about?

Culture communication and etiquette
Coding standards
Internal system and processes
People and contacts

How to do it?

Mentoring
Documentation
Meetings, lunch
Pair Programming

Onboarding Checklist

Here is what this checklist may look like.

Before Start day

Setup Access. SCM, CI/CD, Slack, JIRA etc ...

First day

Intro Team

First week

Up to speed into ongoing projects.
Knowledge sharing.
Team lunch

First month

... and so on

The above is a template to exemplify the idea, You should make your own itinerary that works best for your organisation/team

Although it might take time and effort from the team to prepare this, it is a superb investment in your next star "employee of the month". First impressions matter.

Render a react component in google map canvas.React Portals.

Sudhir — Sat, 28 Sep 2019 00:49:21 +0000

What is this article about ?

How to render a react component as a popup on google map: a perfect use case for React portal. I'll briefly describe the drawing api provided by google map javascript library and then talk about how I integrated this 3rd party library with react.

PS. Some implementation details have been removed from the code blocks to improve readability. The complete working example can be found on the corresponding codepen links.

About React Portals

~~React Portals is this shiny new API from react~~ .. not really. React introduces this api in v16.0 and there are tons of articles with very elaborate and interesting explanations about what it is all about. So won't be talking much about it here. Just google react portal, or check these out..
https://css-tricks.com/using-react-portals-to-render-children-outside-the-dom-hierarchy
https://programmingwithmosh.com/javascript/using-react-portals/
https://codeburst.io/reacts-portals-in-3-minutes-9b2efb74e9a9

About Google maps drawing api.

Skip this section if already familiar with the google maps api.

Google Maps library provides apis to draw any custom HTML content on the map. InfoWindow is one of the popular apis. Another less known option is the OverlayView class. In general InfoWindow apis are easy to use so implementations are much faster, but the popup markup is not fully customizable.
In one of my previous projects in react, I wanted to render a react component in the map as an overlay and found that the OverlayView interface allows to plug-in any HTML element/markup on the map. This write-up will focus on this OverlayView class, although, the concepts discussed here can be applied to InfoWindow based implementation as well.

To render an overlay on the map using the OverlayView class, we need to implement a class which extends the OverlayView class. Here we need to flesh out 3 main functions.

onAdd Append HTML element to a container element in the rendered map canvas. This method is invoked once, when map attempts to render the overlay on the canvas.
draw Set the x, y position of the overlay content. The position (x, y) of the element is translated from the lat, lng values for the position. This method is called each time the content needs to be updated on the map. For example map zoom or pan.
onRemove Removes the element from the map. Called when it is time to remove/hide the overlay element from the map canvas.

Refer to the Custom Popups example and Custom Overlay guide for detailed explanation about the apis and methods.

To kick-off, let's create a React component to render a map.

The implementation is quite straight forward, so let's dive right in.
See codepen example.

class Map extends React.Component {
   /** Map instance */
   map = null;
   /** DOM container where the map canvas gets rendered. */
   mapContainer = React.createRef();
   componentDidMount() {
     /** Create new google map. */
      this.map = new google.maps.Map(this.mapContainer.current, {
        zoom: this.props.zoom,
        center: this.props.center
      })
   }
   render() {
      // reference to the DOM element where the map will be rendered 
      return <div ref={this.mapContainer} 
        style={{ height: '100vh', width: '100vw'}}></div>
   }
}
ReactDOM.render(<Map />, document.getElementById('root'))

The important thing to note here is that the map is rendered inside the container element.
All the markup inside the container is generated and controlled by the map library. React has no control or visibility of the DOM in the map canvas.

Now let's draw a popup in the map.

Here is a codepen with a react component to draw custom HTML markup on the map.

Fo discussion purposes, I have laid out important parts of the CustomOverlayView class that extends the google.maps.OverlayView class.

class CustomOverlayView extends window.google.maps.OverlayView {
   constructor(props) {
      super(props);
      this.position = props.position; // lat, lng position provided by map. This is where the popup is supposed to be rendered
      this.content = props.content; // The HTML element to be rendered in the popup.

      // Create and style the popup markup.
      this.containerDiv = document.createElement("div");
      this.containerDiv.appendChild(content);
   }

   /** Called when the popup is added to the map. */
   onAdd = () => {
      this.getPanes().floatPane.appendChild(this.containerDiv);
   };

   /** Called when the popup is removed from the map. */
   onRemove = () => {
      this.content.parentElement.removeChild(this.content);
   };

   /** Called each frame when the popup needs to draw itself. */
   draw = () => {
      const divPosition = this.getProjection().fromLatLngToDivPixel(
         this.position
      );
      this.content.style.left = divPosition.x + "px";
      this.content.style.top = divPosition.y + "px";
   };
}

All that's left, is to create the overlay instance and attach it to the map by calling the setMap method in the OverlayView class.
Here is the updated componentDidMount of the Map component.

class Map extends React.Component {
    ...
   componentDidMount() {
      /** Create new google map. */
      this.map = new google.maps.Map(this.mapContainer.current, {
         zoom: this.props.zoom,
         center: this.props.center
      });
      /** Create the overlay instance */
      this.popup = new CustomOverlayView({
         position: new google.maps.LatLng(
            this.props.center.lat,
            this.props.center.lng
         ),
         content: document.getElementById("content")
      });
      // Attach the overlay instance to the map. 
      // This renders the overlay on the map.
      this.popup.setMap(this.map);
   }
}

To create the popup element, we need to provide a DOM element to the OverlayView class.

This element is then appended to a container element in the map, this.getPanes().floatPane.appendChild. See onAdd method of the CustomOverlayView class implementation.

Now comes the weird part.
To build the HTML content of the popup, we are getting an element from the DOM using document.getElementById("content"). The react folks may find this uncomfortable.

Ideally this should be a react component rendered by react.

Examples provided by google use document.createElement('div') , el.classList.add('popup-container') approach to create the HTML markup manually.

Both ways of creating the popup markup are very non-react way of working with the DOM.

Let's do it the react way then.

I want to build the popup as a react component and have it rendered as part of the react virtual DOM.
This way, any updates are seamlessly propagated to the popup component via props. Just like any other react component.

The resulting jsx should look something like this...

<Map>
  <OverlayViewContainer 
    position={{ lat: lat1, lng: lng1 }}>
    {/* my custom popup react component */}
    <CustomPopupComponent ... />
  </OverlayViewContainer>
</Map>

The OverlayViewContainer component can encapsulate all the wiring required to integrate our custom CustomOverlayView class with react component tree and can render our custom react component CustomPopupComponent on the map at a given position.
This way we can have a clean interface to render react components on the map.

Show me the code!

Here is the sample app in the codepen. It renders a react component as an popup overlay on the map. The popup shows the current time, which updates every second.

A small update before jumping into the OverlayViewContainer component.
OverlayViewContainer needs the map instance where the overlay will be rendered. We can use React.Context api to pass the map instance from the <Map> to <OverlayViewContainer>.

// New context for passing down the map object from `Map` component to its children.
const MapContext = React.createContext(null);
...
class Map extends React.Component {
  ...
  render() {
    return (
      <div
        ref={...} style={...}>

        {/** Render the children and wrap them with MapContext.Provider component. */}
        <MapContext.Provider value={this.map}>{this.props.children}</MapContext.Provider>
      </div>
    );
  }
}

Finally!! let's build the magic component.

class OverlayViewContainer extends React.Component {
   overlay = null;
   el = null;

   render() {
      return (<MapContext.Consumer>{map => {
         if (map) {

            /** 
             * `OverlayView` will gracefully take this element 
             * and place it in a container on the map.
             * This element will act as the host for 
             * the child popup component to be rendered. 
             * */
            this.el = this.el || document.createElement('div');

            /** 
             * Create the custom overlay view instance,
             * that renders the given `content` at the given `position`
             * */
            this.overlay = this.overlay ||
               new CustomOverlayView({
                  position: this.props.position,
                  content: this.el
               });
            this.overlay.setMap(map);

            /**
             * -----------------------------------------
             * This where React.Portal works its MAGIC.
             * The portal connects `this.props.children`
             * with `this.el`. 
             * So anything in `this.props.children` 
             * gets rendered inside `this.el` DOM element.
             * -----------------------------------------
             * */
            return ReactDOM.createPortal(this.props.children, this.el);

         } else {
            return null;
         }
     }}</MapContext.Consumer>);
   }
}

OverlayView will gracefully take this.el element and place it in a container on the map.
this.el will then act as the host for the child popup component to be rendered.
Here React.Portal works its magic by rendering this.props.children inside this.el (an element that inside the google map canvas.).

Anything rendered as children of OverlayViewContainer, are still part of the react component hierarchy, despite being placed somewhere else on the DOM.

Its like opening a portal in the react component tree which connects to some other place on the DOM.
Any component passing through this portal will be rendered at that place on the DOM.

The resulting VDOM looks like this.

<Map>
   <MapContext.Provider>
      <OverlayViewContainer>
         <MapContext.Consumer>
            <CustomPopupComponent {...} /> 
            // The component exists in the react component heirarchy
            // but is rendered elsewhere on the actual DOM.
         </MapContext.Consumer>
      </OverlayViewContainer>
   </MapContext.Provider>
</Map>

Done!

That’s a wrap! Hopefully this serves as a good example to demonstrate how React Portals can be used to render or affect DOM outside the DOM hierarchy.
It's common to think that a UI library that renders some HTML markup on the DOM, controls everything related to that markup, and nothing else. But React Portal api allows you to extend this functionality to anywhere on the DOM.

Thanks for reading.

Drawing google map and pins using React.Context

Sudhir — Sat, 21 Sep 2019 13:41:31 +0000

The goal

What I envisioned is a react way of rendering the map and drawing items (pins, popups etc..) on the map.

<Map>
  {// Marker component that renders a pin icon on the map }
  <Marker lat={lat1} lng={lng1} />
  <Marker lat={lat2} lng={lng2} />
</Map>

Step 1: Create Basic components to encapsulate google maps api

Google Map class renders a new map in a given DOM element and the corresponding map instance provides apis to interact with the map. Other classes like Marker , InfoWindow and Overlay allow your to draw custom UI on the map.

Map component

Here is a basic map component to render a map in a given container.

class Map extends React.Component {
   /** Map instance */
   map = null;
   /** DOM container where the map canvas gets rendered. */
   mapContainer = React.createRef();
   componentDidMount() {
     /** Create new google map. */
      this.map = new google.maps.Map(this.mapContainer.current, {
        zoom: this.props.zoom,
        center: this.props.center
      })
   }
   render() {
      return <div ref={this.mapContainer}
        style={{ height: '100vh', width: '100vw'}}></div>
   }
}
ReactDOM.render(<Map />, document.getElementById('root'))

Marker component

Draw the marker on a given map at a given position.
To draw a marker, we need the map object which is rendered on the DOM and pair or lat, lng values to position the marker on the map.

class Marker extends React.Component {
   componentWillUnmount() {
      this.marker.setMap(null); // Remove the marker from the map
   }
   render() { 
     const { map, lat, lng } = this.prop
     // Create new marker and render it on the map.
     this.marker =  new Marker({ 
       map: map, // the map instance
       position:  { lat, lng } // position of the marker on the map
     });
     return null; 
   }
}

For details, refer example usage for Adding a Map with a Marker provided by Google.

Step 2: Render Marker as a child component in the Map

Lets look at our target again..

ReactDOM.render(<>
    <Map>
      <Marker lat={lat1} lng={lng1} />
    </Map>
  </>, document.getElementById('root'))

The Marker component needs access to the map instance, which is created in the componentDidMount function in the Map component defined earlier.
The Map component can pass down the map instance via Render Props or using React.createContext.

Child Marker using React Context.

React Context can be used to send props from the parent Map component to child Marker component.
Let's first create a Context for the map instance using the createContext api.

The Map will provide the value of the context using the <MapContext.Provider> component.
See Context.Provider component api.

// Map context with default value of the map set to `null`.
const MapContext = React.createContext({ map: null })
...
class Map extends React.Component {
  render() {
  /**
  * Provide `map` value in map context. This value can be consumed 
  * in any child component using `<MapContext.Consumer>` component.
  */
    return <MapContext.Provider value={{map: this.map}} >
      {this.props.children}
    </MapContext.Provider>
  }
}

In the Marker component we can access the map instance using MapContext.Consumer component.
See Context.Consumer component api

class Marker extends React.Component() {
  /**
  * In the render function, we can use `<MapContext.Consumer>` component 
  * to receive the `map` received from parent `Map` component.
  */  
  render() {
    return <MapContext.Consumer>{({map}) => {
      const { lat, lng } = this.props
      // Create new marker and render it on the map.
      this.marker = this.marker || new Marker({ 
        map: this.map, // the map instance
        position:  { lat, lng }
      });
      this.marker.setPosition({ lat, lng })
      return null;
    }}</MapContext.Consumer>
  }
}

Done!

// Resulting JSX for rendering Marker on Maps.
ReactDOM.render(<>
    <Map>
      <Marker lat={lat1} lng={lng1} />
    </Map>
  </>, document.getElementById('root'))

To recap,

We created a Map component that renders the map canvas, and provides the instance of the corresponding map object to the children, using the Provider component in the React.Context api.
We use the corresponding Consumer component to retrieve the map instance in the Marker component, to draw pins in the map canvas.

Another approach is to use Render Prop technique to provide map object instance to the child Marker component.
The <MapContext.Consumer /> in Marker Component uses this render prop technique to provide access to the map instance.

A sample implementation of Child Marker using Render Prop.

class Map extends React.Component {
  render() {
    return this.props.children(this.map)
  }
}
// Render prop usage
ReactDOM.render(<>
    <Map>{map => {
      <Marker map={map} lat={lat1} lng={lng1} />
    }}</Map>
  </>, document.getElementById('root'))

React.Context is just one way to pass around data in React, there are other techniques more suitable for other use-cases. During this exercise, and others in the past, I did find some benefits of React.Context

resulting JSX is much cleaner
data provided by parent component can be accessed by any child component, at any depth, without requiring explicit prop passing.

Thanks for reading my first tech write up.
Welcome any and all feedbacks.
Cheers.

DEV Community: Sudhir

GitHub Actions to VPS: Zero-Trust with Tailscale

Architecture Overview

Prerequisites

Step 1: Configure Tailscale OAuth Client

Step 2: Configure GitHub Secrets

Step 3: GitHub Actions Workflow Configuration

Step 4: Tailscale ACL Configuration

How It Works

Security Benefits

Troubleshooting

Conclusion

Bridging Cookie-Based SSR Authentication in TanStack Start with JWT-Protected NestJS APIs

The Problem

The Flow

Implementation

NestJS API (Standard JWT Guard)

SSR Server - Cookie Extraction

Key Takeaways

Cookie Configuration

Done!

SSR Server - Cookie Extraction

Key Takeaways

Cookie Configuration

Done!

Emotional wellbeing at the day job

Achievement → satisfaction → reward and recognition → growth.

why am I in a bad mood ?

Everyday Rut

A long day

So what's the point?

Onboarding a new developer.

A good on-boarding can

What is it about?

How to do it?

Onboarding Checklist

Before Start day

First day

First week

First month

Render a react component in google map canvas.React Portals.

What is this article about ?

PS. Some implementation details have been removed from the code blocks to improve readability. The complete working example can be found on the corresponding codepen links.

About React Portals

About Google maps drawing api.

To kick-off, let's create a React component to render a map.

Now let's draw a popup in the map.

Both ways of creating the popup markup are very non-react way of working with the DOM.

Let's do it the react way then.

Show me the code!

Finally!! let's build the magic component.

Done!

Drawing google map and pins using React.Context

The goal

Step 1: Create Basic components to encapsulate google maps api

Map component

Marker component

Step 2: Render Marker as a child component in the Map

Child Marker using React Context.

Done!

A sample implementation of Child Marker using Render Prop.