Full Stack JavaScript developer based in Oslo, Norway, with a passion for building responive user interfaces, scalable database solutions and learning new technologies.

How to set up authorization for your tRPC endpoints using database-sessions and NextAuth

NextAuth tRPC

tRPC endpoint authorization with request context

If you are familiar with Contentful and have considered using it in a TypeScript project you have probably cringed at the idea of writing type defenitions for the deeply nested and recursive responses you get back from your Contentful Client.

```typescript
export async function getStaticProps() {
  const model = await contentfulClient.getEntries({
    content_type: 'someModel',
  });
  return {
    props: {
      someImageUrl: model.items[0]?.fields.image.fields.file.url
    },
  };
}
```

However if you have used Contentful without TypeScript you also know how hard it is to keep track of the shape of the response, which makes your code slow to write and prone to errors.

Thankfully there is an easy fix to this problem using the *contentful-typescript-codegen* package.

---

First we need to install a few packages. I will assume you already have the *contentful* package installed.

```shell
npm i -D contentful-typescript-codegen
```

If you dont have the *Contentful Management* package, go ahead and install that too.

```shell
npm i contentful-management
```

The next step is to create a file called `getContentfulEnvironment.js` in your projects root folder that should look like this:

```javascript
require('dotenv').config();

const contentfulManagement = require('contentful-management');

module.exports = async function () {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN,
  });

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then((space) => space.getEnvironment(process.env.CONTENTFUL_ENVIROMENT))
    .catch(console.error);
};

```

Now it's important to note that `CONTENTFUL_MANAGEMENT_TOKEN` is __NOT__ the same as your usual Access Token. To create a Management Token, go to your Contentful space, click settings > API keys, and then on the top bar click *Content management tokens* to create a new key. The `CONTENTFUL_ENVIROMENT` variable just refers to your enviroment in Contentful, it defaults to `master`.

---

Finally we just have to add a script to package.json that will generate the type defenitions:

```javascript
{
  // ...
  "scripts": {
    "contentful:generate": "contentful-typescript-codegen --output src/types/generated/contentful.d.ts"
  }
}
```

For more options, see the [npm page](https://www.npmjs.com/package/contentful-typescript-codegen "contentful-typescript-codegen").

Now all you have to do is run the codegen script whenever you make changes to your model, and enjoy your freshly generated type defenitions!

Contentful's deeply nested and recursive objects make writing type definitions manually a laborious task. Let's fix that!

contentful plus typescript

Dealing with Contentful types in TypeScript

```typescript
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const firestore = getFirestore(app);

const converter = <T extends DocumentData>(): FirestoreDataConverter<T> => ({
  toFirestore: (user: T) => user,
  fromFirestore: (snapshot: QueryDocumentSnapshot) => {
    return snapshot.data() as T;
  },
});

const dataPoint = <T extends DocumentData>(collectionPath: string, ...pathSegments: string[]) =>
  collection(firestore, collectionPath, ...pathSegments).withConverter(converter<T>());

const db = {
  users: dataPoint<FirestoreUser>('users'),
  matches: dataPoint<FirestoreMatch>('matches'),
  messages: (matchId: string) => dataPoint<ChatMessage>('matches', matchId, 'messages'),
  user: (userId: string) => doc(dataPoint<FirestoreUser>('users'), userId),
  match: (matchId: string) => doc(dataPoint<FirestoreMatch>('matches'), matchId),
  message: (matchId: string, messageId: string) =>
    doc(dataPoint<ChatMessage>('matches', matchId, 'messages'), messageId),
};

export default db;
```

Updated method to handle types with Firestore Javascript SDK

Typescript and Firebase

Using Firestore with Typescript

How i get auth context from a React Native application to access user info on the server

trpc react native

tRPC endpoint authorization with React Native apps

Sindre Bakken Næsset

CV sindre

Main

Middle Mountains

Foreground Mountain

Background Mountains

Sindre Profile Picture

Second iteration of Snipster (add link), a social code-snippet sharing platform. Done mostly as an excuse to get familiar with tRPC (it's awesome), but also to add some of the features we didn't get to on the previous version, as well as making it all a bit more preformant.

Built with TypeScript, Next.js, tRPC, Planetscale(MySQL), Prisma, TailwindCSS and NextAuth. Uses CodeMirror for syntax highlighting of code snippets.

This is currently under construction, but feel free to check out the source code!

Second iteration of Snipster, the social code-snippet sharing platform. Built with TypeScript, Next.js, Prisma, Planetscale, tRPC, Tailwind CSS and NextAuth

snipster v2

Snipster 2.0

Code Snippet sharing platform with social aspects made in under two weeks as our graduation project at [Salt](https://www.salt.study/). Built in Next.js with NextAuth, MongoDB, Prisma and Material UI.

This was a very fun and challenging project that allowed us to dig deeper into the process of designing and building a fully featured app from inception to deploying the finished product.

Code Snippet sharing platform with social aspects built in Next.js with NextAuth, MongoDB, Prisma and Material UI.

snipster

Snipster

Very basic Todo app written in Typescript, using React, Redux and Material UI. Supports light/dark themes based on system preferences.

Simple Todo app in Typescript made with React and Redux

ts todo

Typescript Todo

This project was made during a hack-day event and is a recipe search engine, implementing [spoonacular food API](https://spoonacular.com/food-api "spoonacular food API"). It is missing some features due to the time constraint, like pagination on search results and allowing users to log in and save recipes, but it is intended as an MVP showcasing what i was able to get done in one day.

Both the back-end and front-end is written in Typescript, using Express for the server and React on the client with Redux + RTK for state managment.

Fullstack JavaScript developer.

Sindre Bakken Næsset

Projects.

Full Stack

Snipster 2.0

Full Stack

Snipster

React

Typescript Todo

Blog.

API | Auth

tRPC endpoint authorization with request context

TypeScript

Dealing with Contentful types in TypeScript

Typescript

Using Firestore with Typescript