Implementing contember backend in custom Next.js project

[NotSugat]

Hi, I am trying to implement contember backend in custom Next.js project.

The backend admin is already hosted in contember cloud. I can also fetch data from the frontend through GraphQL client through Next.js frontend. The authentication and login is setup in admin backend already.

Now what the user want is to login to the frontend with the same credential as the backend in the frontend website, and store the changes made in the site in the backend (admin).

How should I setup the authentication for this ? Is there any documentation or would you recommend something to check ? I was suggested Helen and I can not find any external resources for Helen . Thank you !

[jonasnobile]

Hi there,

You can indeed leverage the Contember authentication system on your custom Next.js frontend. The key is to use Contember’s Sign in mutation to authenticate users with the same credentials as your Contember admin backend. Here’s how you might approach it:

1. Using the Sign in Mutation

Contember provides a GraphQL mutation for signing in. When you execute the sign-in mutation, it returns a token that represents the authenticated session. For example, if you’re using Apollo Client, your mutation might look like this:

import { gql, useMutation } from '@apollo/client';

const SIGN_IN_MUTATION = gql`
  mutation SignIn($username: String!, $password: String!) {
    signIn(input: { username: $username, password: $password,  expiration: 60 }) {
      token
    }
  }
`;

const SignInForm = () => {
  const [signIn, { data, loading, error }] = useMutation(SIGN_IN_MUTATION);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const form = event.target;
    const username = form.elements.username.value;
    const password = form.elements.password.value;
    
    try {
      const { data } = await signIn({ variables: { username, password } });
      const token = data.signIn.token;
      // Store the token securely (see Security Considerations below)
    } catch (err) {
      console.error('Sign in error', err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" placeholder="Username" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit" disabled={loading}>Sign In</button>
      {error && <p>Error signing in: {error.message}</p>}
    </form>
  );
};

export default SignInForm;

2. Synchronizing Frontend with Backend Changes

When users make changes on the frontend, you can use the authenticated session (via the token) to perform GraphQL mutations that update your Contember backend. Ensure that your API endpoints or GraphQL resolvers validate the token and enforce proper authorization for any mutations or queries.

3. Further Reading and Resources

• Contember Documentation: The Sign in mutation documentation is a great starting point.
• Next.js Authentication Patterns: Consider reviewing Next.js best practices for authentication and session management.
• Security Best Practices: Always follow current best practices for token storage and session management to mitigate security risks.

By following these steps and utilizing Contember’s built-in authentication, you can seamlessly integrate user login and data synchronization between your Next.js frontend and your Contember backend.

Hope this helps!

[NotSugat]

Thank you for your detailed answer! Is there a mutation for SignUp or this has to be handle by custom inviting the user to the app?

[jonasnobile]

There is SignUp mutation, we call it invite or unmanagedInvite. Mutation unmanagedInvite mostly used for frontend applications when you don't want to send system welcome e-mail. You can read more in the documentation .