nobody Posts - Answer Overflow

nobody

Explore posts from servers

CC#CDCloudflare Developers DDeno DTDrizzle Team

•Created by nobody on 5/23/2024 in #workers-help

CF as my backend. How to solve auth for mobile apps?

I am building a mobile app and I'd like to use CF as my backend. So I wanna use Workers, D1 and so on. The frontend is a Flutter app. My problem: How can I solve the auth problem? My initial plan was to use Firebase Auth and then use the Firebase admin sdk to verify a user within a worker. Sadly the Firebase admin sdk is not edge compatible. How would you solve this problem? I want to use multiple auth flows (Apple, Google, Mail). Authjs has a core package which can be used in CF Workers but it is still experimental..

3 replies

CDCloudflare Developers

•Created by nobody on 5/6/2024 in #pages-help

How to use MDX on CF Pages?

I am trying to use CF Pages for my Next.js blog. I use MDX for that. I followed the instructions from Vercel (https://nextjs.org/docs/app/building-your-application/configuring/mdx) and this is my next.config.mjs:

import rehypePrism from '@mapbox/rehype-prism'
import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev'

if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform()
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  experimental: {
    mdxRs: false,
  },
}

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypePrism],
  },
})

export default withMDX(nextConfig)

import rehypePrism from '@mapbox/rehype-prism'
import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev'

if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform()
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
  experimental: {
    mdxRs: false,
  },
}

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypePrism],
  },
})

export default withMDX(nextConfig)

when I use the simple next dev everything works fine. But the following error shows up If i simulate the CF Pages with the preview command (during compilation):

ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /articles/crafting
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';

ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /articles/crafting
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';

I tried to add the runtime config to the .mdx files, but It does not change anything. this is my mdx-components.tsx:

import { type MDXComponents } from 'mdx/types'
import Image, { type ImageProps } from 'next/image'

export const runtime = 'edge'

export function useMDXComponents(components: MDXComponents) {
  return {
    ...components,
    Image: (props: ImageProps) => <Image {...props} />,
  }
}

import { type MDXComponents } from 'mdx/types'
import Image, { type ImageProps } from 'next/image'

export const runtime = 'edge'

export function useMDXComponents(components: MDXComponents) {
  return {
    ...components,
    Image: (props: ImageProps) => <Image {...props} />,
  }
}

I appreciate any kind of feedback on that. I tried to lookup old threads, but I did not found a solution to this

2 replies

Gaming

Programming