Server-side authentication for external services

peternovak · 2023-07-03T09:31:51.489Z

Hi all! I am looking at building a program that queries Google Earth Engine for forest data in a carbon project, and looking at how I could access their api using a generic account for all users. Their documentation: https://developers.google.com/earth-engine/guides/npm_install describe the process to initialize the client from the server. I have not done this before in a monorepo, so I wonder where the best place to do this within a vanilla T3 app structure? Since I am using a generic account, I am thinking I only want to run this once when the T3 app starts.

K

Keef•7/3/23, 9:42 AM

I generally spin off singletons like the prisma client if you go to the file it’s instantiated in. Then just import when needed.

K

Keef•7/3/23, 9:42 AM

That should work for this

K

Keef•7/3/23, 9:43 AM

And I leave it in the /server directory under a file like earth-api yadda yadda

K

Keef•7/3/23, 9:43 AM

Can folder it too if you want

P

peternovakOP•7/3/23, 10:07 AM

Thanks @keef (Rustular CVO) , that sounds like a nice approach! I realize this question sounds very nooby, but from where should I call this function? I noted in this thread that some people have configured their next.config.js file for this:
https://github.com/vercel/next.js/discussions/15054
But the one in vanilla T3 does not call prisma (so that must be initiated elsewhere). I imagine it would be good to have all this at one place?

GitHub

Global variables · vercel next.js · Discussion #15054

Hello! I would like to create a variable in server.js and use it everywhere in application. I need to make a call to an API and get a list (with categories) which I will use in my application. The ...

K

Keef•7/3/23, 11:14 AM

It gets initialized at some point but I don't know the exact terminology. Its definitely implicit

K

Keef•7/3/23, 11:15 AM

If you want a more explicit definition you can do something like this

K

Keef•7/3/23, 11:16 AM

let prisma;

export const getDatabase() {
  if(!prisma) {
    prisma = new PrismaClient({})
  }  
  
  return prisma
}

let prisma;

export const getDatabase() {
  if(!prisma) {
    prisma = new PrismaClient({})
  }  
  
  return prisma
}

let prisma;

export const getDatabase() {
  if(!prisma) {
    prisma = new PrismaClient({})
  }  
  
  return prisma
}

let prisma;

export const getDatabase() {
  if(!prisma) {
    prisma = new PrismaClient({})
  }  
  
  return prisma
}

Then just call getDatabase where you need it

K

Keef•7/3/23, 11:16 AM

Thats free handed so it might not be 100% correct but the gist is its lazy initialized once you try to use it once

K

Keef•7/3/23, 11:17 AM

In comparison to how I have mine currently set up which is off the t3 turbo boilerplate

import { PrismaClient } from "@prisma/client";

import { env } from "~/env.mjs";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log:
      env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
  });

if (env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

import { PrismaClient } from "@prisma/client";

import { env } from "~/env.mjs";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log:
      env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
  });

if (env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

import { PrismaClient } from "@prisma/client";

import { env } from "~/env.mjs";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log:
      env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
  });

if (env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

import { PrismaClient } from "@prisma/client";

import { env } from "~/env.mjs";

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log:
      env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
  });

if (env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

K

Keef•7/3/23, 11:21 AM

Actually its basically the same thing. Once you try to use prisma like in context for trpc, it'll initialize it for you

K

Keef•7/3/23, 11:23 AM

Create context is likely the first usage of prisma so it'll be defined in that area

// This will basically initialize it for us
import { prisma } from "db";

// This will allow us to use it throughout our routes
const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
  };
};

// This will basically initialize it for us
import { prisma } from "db";

// This will allow us to use it throughout our routes
const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
  };
};

// This will basically initialize it for us
import { prisma } from "db";

// This will allow us to use it throughout our routes
const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
  };
};

// This will basically initialize it for us
import { prisma } from "db";

// This will allow us to use it throughout our routes
const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
  };
};

K

Keef•7/3/23, 11:25 AM

Some of their uses cases in that github link are a little different

P

peternovakOP•7/3/23, 11:26 AM

Oh, thanks, I was just thinking I would initiate Earth Engine at the same place, but maybe it is overkill to change Prisma

P

peternovakOP•7/3/23, 11:26 AM

Where would you call the EarthEngine singleton in a vanilla T3 setup?

K

Keef•7/3/23, 11:27 AM

You are using it to query with yeah?

K

Keef•7/3/23, 11:27 AM

Its just another thing like prisma, just a controller/api for us to consume in our queries/mutations

K

Keef•7/3/23, 11:27 AM

so I'd probably toss it in the trpc context

K

Keef•7/3/23, 11:27 AM

if thats what i'll be doing with it

P

peternovakOP•7/3/23, 11:28 AM

Yes I use to to query, but I only need to initiate it once for all users

K

Keef•7/3/23, 11:28 AM

Yeah just do the same thing as initializing prisma

K

Keef•7/3/23, 11:28 AM

one sec I can write it for you and it'll probably do the job?

K

Keef•7/3/23, 11:40 AM

Oh man this thing doesn't have types available what a pos

P

peternovakOP•7/3/23, 11:45 AM

Yeah, typescript is furious at me at the moment :/

K

Keef•7/3/23, 11:52 AM

// earth-api.ts
import ee from '@google/earthengine';
import { env } from '~/env.mjs';

const globalForEarthEngine = globalThis as unknown as {
    earthEngine: ee | undefined;
};

export const earthEngine =
    globalForEarthEngine.earthEngine ??
    ee.data.authenticateViaPrivateKey(
        env.EE_KEY,
        () => {
            // success authentication
            ee.initialize(
                null,
                null,
                () => {
                    // success init
                },
                () => {
                    // fail init
                },
            );
        },
        () => {
            // fail authentication
        },
    );

// earth-api.ts
import ee from '@google/earthengine';
import { env } from '~/env.mjs';

const globalForEarthEngine = globalThis as unknown as {
    earthEngine: ee | undefined;
};

export const earthEngine =
    globalForEarthEngine.earthEngine ??
    ee.data.authenticateViaPrivateKey(
        env.EE_KEY,
        () => {
            // success authentication
            ee.initialize(
                null,
                null,
                () => {
                    // success init
                },
                () => {
                    // fail init
                },
            );
        },
        () => {
            // fail authentication
        },
    );

// earth-api.ts
import ee from '@google/earthengine';
import { env } from '~/env.mjs';

const globalForEarthEngine = globalThis as unknown as {
    earthEngine: ee | undefined;
};

export const earthEngine =
    globalForEarthEngine.earthEngine ??
    ee.data.authenticateViaPrivateKey(
        env.EE_KEY,
        () => {
            // success authentication
            ee.initialize(
                null,
                null,
                () => {
                    // success init
                },
                () => {
                    // fail init
                },
            );
        },
        () => {
            // fail authentication
        },
    );

// earth-api.ts
import ee from '@google/earthengine';
import { env } from '~/env.mjs';

const globalForEarthEngine = globalThis as unknown as {
    earthEngine: ee | undefined;
};

export const earthEngine =
    globalForEarthEngine.earthEngine ??
    ee.data.authenticateViaPrivateKey(
        env.EE_KEY,
        () => {
            // success authentication
            ee.initialize(
                null,
                null,
                () => {
                    // success init
                },
                () => {
                    // fail init
                },
            );
        },
        () => {
            // fail authentication
        },
    );

// trpc.ts or wherever you define the context
import { earthEngine } from "../earth-api";

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
    earthEngine
  };
};

// trpc.ts or wherever you define the context
import { earthEngine } from "../earth-api";

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
    earthEngine
  };
};

// trpc.ts or wherever you define the context
import { earthEngine } from "../earth-api";

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
    earthEngine
  };
};

// trpc.ts or wherever you define the context
import { earthEngine } from "../earth-api";

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
    earthEngine
  };
};

// random router
const someRouter = router({
  carbon: publicProcedure.query(async({ctx}) => {
          // ctx.earthEngine should be available to you here now
  }),
})

// random router
const someRouter = router({
  carbon: publicProcedure.query(async({ctx}) => {
          // ctx.earthEngine should be available to you here now
  }),
})

// random router
const someRouter = router({
  carbon: publicProcedure.query(async({ctx}) => {
          // ctx.earthEngine should be available to you here now
  }),
})

// random router
const someRouter = router({
  carbon: publicProcedure.query(async({ctx}) => {
          // ctx.earthEngine should be available to you here now
  }),
})

K

Keef•7/3/23, 11:52 AM

Haven't had too much experience consuming non typed js libs in typescript so I won't be much use here

K

Keef•7/3/23, 11:52 AM

but that should work?

K

Keef•7/3/23, 11:54 AM

Basically we define the interface once in earth-api.ts whenever we try to use it we check global.earthEngine to see if it exists and if it doesn't we'll initialize it then give it to who needs it

P

peternovakOP•7/3/23, 11:54 AM

Cool, thanks, let me try!!

K

Keef•7/3/23, 11:54 AM

fingers crossed

K

Keef•7/3/23, 11:54 AM

K

Keef•7/3/23, 11:56 AM

this check might also be necessary in your earth-api.ts

K

Keef•7/3/23, 11:56 AM

if (env.NODE_ENV !== "production") globalForEarthEngine.earthEngine = earthEngine;

if (env.NODE_ENV !== "production") globalForEarthEngine.earthEngine = earthEngine;

if (env.NODE_ENV !== "production") globalForEarthEngine.earthEngine = earthEngine;

if (env.NODE_ENV !== "production") globalForEarthEngine.earthEngine = earthEngine;

K

Keef•7/3/23, 11:57 AM

for non production since hot module reload can sometimes spawn a lot of the same thing when you are doing dev work

K

Keef•7/3/23, 11:58 AM

for production we initialize it once in context so its safe to leave out

P

peternovakOP•7/3/23, 1:02 PM

I tried to implement a rough non-typesafe version just to see if to would work:

P

peternovakOP•7/3/23, 1:02 PM

But I guess I am using 'ee' in the wrong way:

P

peternovakOP•7/3/23, 1:09 PM

Given how the 'ee' object looks like, could there be some better way to wrap in my backend?

P

peternovakOP•7/3/23, 1:11 PM

Wait, let me do one more test.

P

peternovakOP•7/3/23, 1:15 PM

I placed my promises in the wrong order. Just did a test with this code and despite the typings are horrible, it seams to work!!

P

peternovakOP•7/3/23, 1:21 PM

Let me try some real API calls and see if it works there!

P

peternovakOP•7/3/23, 3:37 PM

So far so good - thanks a lot @keef (Rustular CVO) , this looks really promising!!

Server-side authentication for external services

Similar Threads

Similar Threads

Similar Threads