Next.js 13 AppDir external backend auth

[cold hornet]

I have an existing React app that uses Spotify for authentication. You click a login button, get redirected to the Spotify auth page, log into Spotify, get redirected back to my React frontend, I catch the auth code, send it to my backend, fetch the Spotify account data, save it to the database, then issue access and refresh tokens. The access token goes into app memory, with the refresh token stored in an httpOnly cookie, access token goes into every request, etc - pretty standard stuff.

I want to migrate my React app to Next.JS 13 with AppDir. How do I go about this? What do I use? I'm open to modifying the auth flow.

[vital hedge]

Hi @cold hornet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Migrating your existing React application to Next.js 13 with the app directory involves several steps. Here's a general guide based on the information provided in the extracts:

1. Update your Next.js application from version 12 to version 13: You can do this by running the following command using your preferred package manager:

npm install next@latest react@latest react-dom@latest

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#nextjs-version))

2. Upgrade features that work in both the pages and the app directories: Next.js 13 introduces a new app directory with new features and conventions. However, upgrading to Next.js 13 does not require using the new app directory. You can continue using pages with new features that work in both directories.
   (Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/upgrading/version-13))

3. Incrementally migrate your existing application from pages to app: The app directory can be incrementally adopted from your existing pages directory. This means you can gradually move your components and logic from pages to app at your own pace.
   (Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app))

Regarding your authentication flow with Spotify, you can still maintain this flow in Next.js. However, the way you handle requests and data fetching might change slightly due to the new features in the app directory. For instance, in the app directory, you can use new read-only functions to retrieve request data:

• headers(): Based on the Web Headers API, and can be used inside Server Components to retrieve request headers.
• cookies(): Based on the Web Cookies API, and can be used inside Server Components to retrieve cookies.

Here's an example of how you might use these functions:

// `app` directory
import { cookies, headers } from 'next/headers'
 
async function getData() {
 const authHeader = headers().get('authorization')
 
 return '...'
}
 
export default async function Page() {
 // You can use `cookies()` or `headers()` inside Server Components
 // directly or in your data fetching function
 const theme = cookies().get('theme')
 const data = await getData()
 return '...'
}

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app))

Remember, the app directory is currently in beta and it's not recommended to use it in production yet. You can use Next.js 13 with the pages directory with stable features and opt into the app directory at your own pace.
(Source: Next.js Blog (https://nextjs.org/blog/next-13))

For more detailed instructions and examples, you can refer to the Next.js documentation (https://nextjs.org/docs).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: