NextAuth

<html><head></head><body><p>One of the wonderful things about Claris FileMaker is its ability to power web apps. However, doing so brings up questions about authentication. For instance, how do you allow a user to securely log into a web app? Once they’ve logged in, how can information about the user be easily collected, displayed, and changed according to the user’s role and permission set in that web app? </p>



<p>For <a href="https://nextjs.org/" target="_blank" rel="noreferrer noopener">Next.js</a> there is a great library to handle secure authentication: <a href="https://next-auth.js.org/" target="_blank" rel="noreferrer noopener">NextAuth</a>. Because NextAuth is open-source and extensible, we built a FileMaker database adapter—Next-Auth FileMaker Adapter—that can connect directly to your existing solution and access various attributes that you are already storing about your users. In the tutorial below, you will learn how to configure a Next.js project with NextAuth and FileMaker. </p>



<p>To best follow along, you should be familiar with <a href="https://www.npmjs.com/" target="_blank" rel="noreferrer noopener">npm</a> or <a href="https://yarnpkg.com/" target="_blank" rel="noreferrer noopener">yarn</a>, the basics of <a href="https://nextjs.org/" target="_blank" rel="noreferrer noopener">Next.js</a>, and <a href="https://help.claris.com/en/data-api-guide/" target="_blank" rel="noreferrer noopener">how to enable the FileMaker Data API</a> on FileMaker Server. Prefer to watch me do it? Feel free to follow along with this <a href="https://youtu.be/yvr3YbTTW_w">video</a>!</p>



<h2 class="wp-block-heading" id="h-project-setup">Project Setup</h2>



<p>For this tutorial, start with the example provided by NextAuth: <a href="https://github.com/nextauthjs/next-auth-example" target="_blank" rel="noreferrer noopener">https://github.com/nextauthjs/next-auth-example</a><strong> </strong></p>



<p><strong>NOTE:</strong> This example repo uses TypeScript, but there are no TypeScript-specific features required for this tutorial. It should look and function very similar to a standard JavaScript project.</p>



<h3 class="wp-block-heading">1. Clone the repository to your computer.</h3>



<pre class="wp-block-preformatted">git clone https://github.com/nextauthjs/next-auth-example.git
cd next-auth-example
npm install</pre>



<h3 class="wp-block-heading">2. Configure your local environment.</h3>



<pre class="wp-block-preformatted">cp .env.local.example .env.local</pre>



<p>Start by editing this file with some API keys to connect to whichever login provider you’ll want to use. You can learn more about all the available login providers and how to configure each one in the <a href="https://next-auth.js.org/providers/" target="_blank" rel="noreferrer noopener">NextAuth documentation</a>. If you go the Email provider route—a great option for password-less login links—you’ll also need to install the <code>nodemailer</code> package to your project <code>npm install nodemailer</code>. While you’re in the file, add credentials for connecting to your FileMaker server—you’ll use them later. If you’re using my sample file, add the credentials below to the .env.local file. This account has the <code>fmrest</code> privilege set enabled, and the file should be hosted on a server with the FileMaker Data API enabled.</p>



<pre class="wp-block-preformatted">FM_USERNAME=fmrest
FM_PASSWORD=fmrest
FM_DATABASE=next_auth_demo.fmp12
FM_SERVER=https://myfmserver.com</pre>



<p>Remember to change the <code>FM_SERVER</code> value to your own FileMaker server, where this file is hosted! </p>



<p>If you have Otto installed on your FileMaker server, you can also use the <a href="https://www.ottofms.com/docs/developer-api/proxy" target="_blank" rel="noreferrer noopener">Data API proxy</a> feature instead of username/password.</p>



<h3 class="wp-block-heading">3. Install the FileMaker Adapter.</h3>



<p>Run the following command to add Next-Auth FileMaker Adapter to your project.</p>



<pre class="wp-block-preformatted">npm install next-auth-adapter-filemaker</pre>



<h3 class="wp-block-heading">4. Run the website locally.</h3>



<p>This step ensures that you’ve got the initial setup working properly. If this step fails, go back and double-check all the configuration settings.</p>



<pre class="wp-block-preformatted">npm run dev</pre>



<h2 class="wp-block-heading" id="h-nextauth-setup">NextAuth Setup</h2>



<p>With this project in your favorite code editor (I like <a href="https://code.visualstudio.com/download" target="_blank" rel="noreferrer noopener">VSCode</a>), navigate to <code>/pages/api/auth/[…nextauth].ts</code>. Within the providers array, add or remove the login providers that you want to expose to your app, depending on which ones you set up in the previous step. Add the following code to the top of the <code>[...nextauth].ts</code> file (before the export statement):</p>



<pre class="wp-block-preformatted">import { FilemakerAdapter } from "next-auth-adapter-filemaker";
const fmAdapter = FilemakerAdapter({
&nbsp; auth: {
		username: process.env.FM_USERNAME,
		password: process.env.FM_PASSWORD
	},
&nbsp; // or, if you have Otto on your FM Server
&nbsp; // auth: { apiKey: process.env.OTTO_API_KEY },
&nbsp; db: "FM_DATABASE",
&nbsp; server: "https://myfmserver.com",
});</pre>



<p>Then, add an adapter key to the NextAuth export that references the adapter we just created:</p>



<pre class="wp-block-preformatted">export default NextAuth({
&nbsp; &nbsp; ...
&nbsp; &nbsp; adapter: fmAdapter.Adapter,
	providers: [...]
&nbsp; &nbsp; ...
});</pre>



<p>And that’s it! Run the dev server (<code>npm run dev</code>) and check out the example in your browser. When you log in, you’ll see your user account created in your FileMaker file.</p>



<h2 class="wp-block-heading" id="h-usage">Usage</h2>



<p>One of the major benefits of this setup is that you can now easily access other custom attributes about your users as defined in your FileMaker file. Now that NextAuth can access your user table, you can inject that information into the session object that is returned. Within your NextAuth configuration object, add the callback function for session and inject the <code>user</code> object into <code>session.user</code>, then return the session object like so:</p>



<pre class="wp-block-preformatted">export default NextAuth({
&nbsp; &nbsp; ...
&nbsp; &nbsp; callbacks: {
      session({ session, user }) {
        session.user = user
        return session
      }
    },
&nbsp; &nbsp; ...
});</pre>



<p>By default, the user object that’s returned from the session is very bare-bones, but with this technique, the entire use object returned from your FileMaker database will be present in the front-end of your web app. Now, go to the <code>nextauth_user</code> layout in your FileMaker file, and change up the fields that you see there. You can remove any of the optional fields that you don’t need or add your own! After making those changes you can go back to the web app and re-fetch your session on the API example page to see all of those fields come through.</p>



<p>To see all of this in action, check out my <a href="https://youtu.be/yvr3YbTTW_w" target="_blank" rel="noreferrer noopener">video tutorial</a>.</p>



<h2 class="wp-block-heading" id="h-optimizations">Optimizations</h2>



<p>If you’d like to implement this in production, there are a couple more things to consider. The default configuration will make at least 1 Data API call to your FileMaker server each time that a new page is loaded, sometimes even more frequently. To counteract this, you have 2 options which I can describe briefly.</p>



<h3 class="wp-block-heading"><strong>Option 1: JSON Web Token</strong></h3>



<p>If you change your session strategy to JWT in the NextAuth config, it will only use the adapter for login, but not sessions. To remain logged in, the user will store this special token in their browser. The primary downside to this approach is that you cannot force a user to log out by deleting their session on your server, but it is the simplest way to configure a production-ready app.</p>



<h3 class="wp-block-heading"><strong>Option 2: Redis Cache</strong></h3>



<p>This package supports caching sessions in a <a href="https://redis.com/?utm_source=google&amp;utm_medium=cpc&amp;utm_term=redis&amp;utm_campaign=evergreen-redis-brand-us-can-en&amp;utm_content=redis-brand&amp;gclid=CjwKCAjw46CVBhB1EiwAgy6M4tFIPo1KDK-8krs3PBMwRphOFRYjSBnq4qz684Y0zMRNUwgTyVlaQRoCTWsQAvD_BwE" target="_blank" rel="noreferrer noopener">Redis</a> database so you can still get the benefit of database sessions without the load on your FileMaker server. At this time, we have tested support with the <a href="https://upstash.com/" target="_blank" rel="noreferrer noopener">Upstash</a> Redis host, as they have great serverless support and work well with Next.js</p>



<p>The primary downside to this option is that you’re now dealing with a cache, and that requires a bit more thought about how you might want to update user data since the web app will no longer hit your FileMaker database directly to check for the latest changes. The cache is automatically updated when a user logs in, but if you want to update any part of their user object while they are logged in, you may need to have FileMaker update the Redis cache directly.</p>



<h2 class="wp-block-heading" id="h-proof-geist-supporting-your-filemaker-ecosystem">Proof+Geist: Supporting Your FileMaker Ecosystem</h2>



<p>At&nbsp;<a href="https://www.proofgeist.com/">Proof+Geist</a>, we know that the Claris platform is a key puzzle piece to any business ecosystem. With our world-class&nbsp;<a href="https://www.ottomatic.cloud/" target="_blank" rel="noreferrer noopener">hosting platform</a>, professional&nbsp;<a href="https://www.ottofms.com/" target="_blank" rel="noreferrer noopener">development tools</a>, and expertise in both Claris FileMaker and web technologies, we are ready to innovate and help support your business. For questions, comments, or more information, drop us a line at <a href="mailto:info@proofgeist.com" target="_blank" rel="noreferrer noopener">info@proofgeist.com</a>.</p>
</body></html>

Managing authentication for FileMaker-backed web apps

One of the wonderful things about Claris FileMaker is its ability to power web apps. However, doing so brings up questions about authentication. For instance, how do you allow a user to securely log into a web app? Once they&#8217;ve logged in, how can information about the user be easily collected, displayed, and changed according to the user&#8217;s role and permission set in that web app? For Next.js there is a great library to handle secure authentication: NextAuth. Because NextAuth [&hellip;]

Blogs tagged with: NextAuth

Managing authentication for FileMaker-backed web apps

RECEIVE THE OCCASIONAL UPDATE.

NEW PROJECT OR COLLABORATION?

FOLLOW US.