Post deployment issue

Help
1

I have a project where I am using Nextjs, Next auth, postgre and prisma. Locally everything is working fine but after deployment I am not able to get user data or user Id from the session for further features to work.

Repo Link: GitHub - Crazyhaller/play-me: A music streaming web platform for creators to let others choose which music to play

When running locally in the app/dashboard/page.tsx I am able to get the creatorId but in deployed version its null.

Can somebody give a couple minutes and look into my problem and see if they can help!

2

Hi, @crazyhaller! Welcome to the Vercel Community :smile:

A few suggestions to look at:

  1. Environment Variables

    1. Ensure all necessary environment variables are correctly set in the production environment.
    2. Key variables include NEXTAUTH_SECRET, DATABASE_URL, and any OAuth provider credentials (e.g., GITHUB_ID, GITHUB_SECRET).
    3. Double-check that these variables are properly loaded in the production environment.

  2. NextAuth Configuration

    1. Review the authOptions in app/api/auth/[...nextauth]/route.ts.
    2. Make sure the callbacks section includes a session callback that adds the user ID to the session.
    3. Verify that the correct authentication providers are set up and configured.

  3. API Route for User Data

    1. In the app/api/user/route.ts file, ensure you’re using getServerSession(authOptions) instead of just getServerSession().
    2. Consider removing the additional database query if the session already contains all necessary user information.

  4. Database Connection

    1. Verify that the production database is properly connected and accessible.
    2. Check if all necessary tables are created and migrations are up to date.

  5. Client-Side Fetching

    1. In the page.tsx file, improve error handling and logging in the fetchUserData function.
    2. Consider adding more detailed console logs to help identify where the issue occurs.

  6. Server-Side Rendering Alternative

    1. If client-side fetching continues to be problematic, consider switching to server-side rendering for pages that require user authentication.

  7. Deployment Platform

    1. Check the deployment logs for any errors related to building or running the application.
    2. Ensure that the deployment platform is configured correctly for a Next.js application with API routes.

  8. CORS and Cookie Settings

    1. If using a separate domain for API calls, ensure CORS is properly configured.
    2. Check that cookies are being set and sent correctly in the production environment.

Let us know how you get on!

1 Like
3

Thanks for reaching out! I will check and do those things.

1 Like
4

one last thing @pawlean missed, with NextAuth/Auth.js make sure if you’re using oauth that your provider has your production url set as an allowed callback URL otherwise it won’t work, some providers like google will let you have a list of URLs but GitHub last time I checked forces only one so you need a second oauth app for your production instance (you can do auth proxies as well with some secrets headers to get this working for preview environments too)

2 Likes
5

+1 spot on! Thanks @versecafe :smile:

1 Like
6

I have added my prod url on the google oauth console. That I made sure to do when I deployed the project. Thanks for reaching out though!

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.