This is an Encore + Next.js + Auth0 project starter. It's a great way to learn how to combine Encore's backend capabilities with a modern web framework and a widely used authentication provider — perfect for building a web app.
When you have installed Encore, you can create a new Encore application and clone this example by running this command:
encore app create my-app --example=nextjs-auth0-starter
In the Auth0 dashboard, create a new Single Page Web Applications.
You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
You need the following information:
Open the configuration file at backend/auth/encore.cue and add values from the Auth0 dashboard.
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. For this example, the callback URL is http://localhost:3000/callback.
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. For this example, the logout URL is http://localhost:3000/.
Run your Encore backend:
encore run
In a different terminal window, run the Next.js frontend:
cd frontend
npm install
npm run dev
Open http://localhost:3000 in your browser to see the result.
While encore run is running, open http://localhost:9400/ to view Encore's local developer dashboard.
Here you can see the request you just made and a view a trace of the response.
Keep the contract between the backend and frontend in sync by regenerating the request client whenever you make a change to an Encore endpoint.
npm run gen # Deployed Encore staging environment
# or
npm run gen:local # Locally running Encore backend
Deploy your backend to a staging environment in Encore's free development cloud:
git add -A .
git commit -m 'Commit message'
git push encore
Then head over to the Cloud Dashboard to monitor your deployment and find your production URL.
From there you can also see metrics, traces, connect your app to a GitHub repo to get automatic deploys on new commits, and connect your own AWS or GCP account to use for deployment.
frontend as the root directory for the Vercel projectIf you are running into CORS issues when calling your Encore API from your frontend then you may need to specify which
origins are allowed to access your API (via browsers). You do this by specifying the global_cors key in the encore.app
file, which has the following structure:
global_cors: {
// allow_origins_without_credentials specifies the allowed origins for requests
// that don't include credentials. If nil it defaults to allowing all domains
// (equivalent to ["*"]).
"allow_origins_without_credentials": [
"<ORIGIN-GOES-HERE>"
],
// allow_origins_with_credentials specifies the allowed origins for requests
// that include credentials. If a request is made from an Origin in this list
// Encore responds with Access-Control-Allow-Origin: <Origin>.
//
// The URLs in this list may include wildcards (e.g. "https://*.example.com"
// or "https://*-myapp.example.com").
"allow_origins_with_credentials": [
"<DOMAIN-GOES-HERE>"
]
}
More information on CORS configuration can be found here: https://encore.dev/docs/develop/cors