Invalid redirect URI with Plasmic Auth

Issues
1

Hi team, when using Plasmic Auth for our app, we received a {"error":"invalid_redirect_uri"} message. In the setting for auth, we left the Redirect URI as blank. Is it incorrect?

2

ProjectID 888VGCD9yqo9DcnNr3LPMu

3

Hosted at: https://staff.ncegroup.com.au/

4

Hi Dan, while using Plasmic Auth its required to add your domain as a redirect uri, if you aren’t using Plasmic Hosting, also in your PlasmicRootProvider you have to add your redirect uri as show in https://docs.plasmic.app/learn/auth-integration/ only the redirect uri should be enough to get it working

1 Like
5

Hi Filipe, thanks for the pointer. It has worked :pray: :pray: :pray:

6

I have added the prop to PlasmicRootProvider but still getting that same error (invalid redirect uri). Project id is m1YJaNVKVr5vEmxNz4VFS3

7

Hello

The “invalid_redirect_uri” error likely stems from leaving the Redirect URI blank in your Plasmic Auth settings. Confirm it’s correctly configured to match where your app expects the authorization response. Once updated, the error should be resolved.

If issue not resolved contact Plasmic support for help .

Thank you
nolanmaris

1 Like
8

Hello
I have the same issue and I’m trying to implement the proposed solution

My setup:

  • self-hosted
  • plasmic auth
  • NextJS
  • Codegen

I wonder where I should set the authRedirectUri prop on PlasmicRootProvider?
The only place in my codebase where PlasmicRootProvider is used is in NextJS’ catch-all page, which seems to be the recommended way to setup NextJS as per Get started with Next.js | Learn Plasmic

This is fine but the codeGen export is actually creating a distinct javascript file per Plasmic page. Those pages looks something like:

import * as React from "react";
import { PageParamsProvider as PageParamsProvider__ } from "@plasmicapp/react-web/lib/host";
import GlobalContextsProvider from "../components/plasmic/feature_registry/PlasmicGlobalContextsProvider";
import { PlasmicFeaturesList } from "../components/plasmic/feature_registry/PlasmicFeaturesList";
import { useRouter } from "next/router";

function FeaturesList() {
  return (
    <GlobalContextsProvider>
      <PageParamsProvider__
        route={useRouter()?.pathname}
        params={useRouter()?.query}
        query={useRouter()?.query}
      >
        <PlasmicFeaturesList />
      </PageParamsProvider__>
    </GlobalContextsProvider>
  );
}

export default FeaturesList;

Should I add a property there, if so where exactly, and do I need to do that for every page file created by CodeGen?

Thanks a lot

9

Hello,

Could somebody help with this issue?

Thanks a lot and happy 2025

Christophe

10

Hello @christophe_noel, you can use PlasmicRootProvider in _app.tsx. This is a special file and you can read about it in the NextJS docs: Routing: Custom App | Next.js.

Here’s a sample _app.tsx:

import '@/styles/globals.css'
import { PlasmicRootProvider } from "@plasmicapp/react-web";
import type { AppProps } from "next/app";
import Head from "next/head";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <PlasmicRootProvider Head={Head} authRedirectUri="<your-redirect-uri>">
      <Component {...pageProps} />
    </PlasmicRootProvider>
  );
}
11

Thanks a lot for the support :hugs: