Amazon Cognito Auth Provider Support

[omeraplak]

Is your feature request related to a problem? Please describe.

It would be great if we set up an example for Amazon Cognito.

Describe alternatives you've considered

No response

Additional context

https://refine.dev/docs/examples/auth-provider/auth0/
https://github.com/pankod/refine/tree/master/examples/authProvider

Describe the thing to improve

We can create a quick starting point for AWS Cognito users

[Smartmind12]

@omeraplak can you assign it to me and i will try to have a shot at it ??

[omeraplak]

Hey @Smartmind12 ,
Thank you for your interest. Have you any experience with AWS Cognito?

[Smartmind12]

Hey @Smartmind12 ,
Thank you for your interest. Have you any experience with AWS Cognito?

Hey, yes i have worked on it during my hackathons so i have knowledge about it

[omeraplak]

Cool, Happy Hacking! 🚀

[Smartmind12]

Cool, Happy Hacking! 🚀

Update: I have been busy in the last few days … so i will start working on it by today and submit! Thanks!

[omeraplak]

Hey @Smartmind12 ,
Any updates on this issue?

[Smartmind12]

Hey @Smartmind12 ,
Any updates on this issue?

I have run it on local and pushed some of the files in the branch and adding rest of the files…once thats done i will add the PR!

[salihozdemir]

Due to inactivity unassigned @Smartmind12 from this issue. Anyone still interested in this?

[Lagyu]

For anyone looking for drop-in authProvider with amplify-js cognito integration:

import { AuthBindings } from "@refinedev/core";
import { Amplify, Auth } from "aws-amplify";
import type { AuthActionResponse } from "@refinedev/core/dist/interfaces";
import { env } from "./env";

Amplify.configure({
  Auth: {
    // fixme: set your own ids.
    userPoolId: env.VITE_USERPOOL_ID,
    userPoolWebClientId: env.VITE_USERPOOL_WEB_CLIENT_ID,
  },
});

interface CognitoUser {
  username: string;
  attributes: {
    name: string;
    picture?: string;
    email: string;
    // fixme: put your own permission attribute here if you have one.
    // "custom:permissions"?: string;
  };
}

const getErrorResponse = (error: unknown): AuthActionResponse => {
  if (error instanceof Error) {
    return {
      success: false,
      error: error,
    };
  }
  if (typeof error === "string") {
    return {
      success: false,
      error: new Error(error),
    };
  } else {
    return {
      success: false,
      error: new Error("Unknown error"),
    };
  }
};

const authProvider: AuthBindings = {
  login: async (input) => {
    const { email, password } = input;
    try {
      const user = await Auth.signIn(email, password);
      console.info("login success", user);
      return {
        success: true,
        redirectTo: "/",
      };
    } catch (error) {
      return getErrorResponse(error);
    }
  },
  logout: async () => {
    try {
      await Auth.signOut();
      return {
        success: true,
        redirectTo: "/login",
      };
    } catch (error) {
      return getErrorResponse(error);
    }
  },
  onError: async (error) => {
    if (error.status === 401 || error.status === 403) {
      return {
        logout: true,
        redirectTo: "/login",
        error: new Error("Unauthorized"),
      };
    }
    return {};
  },
  check: async () => {
    try {
      await Auth.currentSession();
      return {
        authenticated: true,
      };
    } catch (error) {
      return {
        authenticated: false,
        logout: true,
        redirectTo: "/login",
      };
    }
  },
  getPermissions: async () => {
    try {
      const user = (await Auth.currentAuthenticatedUser()) as unknown as CognitoUser;
      // fixme: implement your own logic
      // const permissions = (user.attributes["custom:permissions"] ?? "").split(",");
      // return permissions;
      return [];
    } catch (error) {
      return [];
    }
  },
  getIdentity: async () => {
    try {
      const user = (await Auth.currentAuthenticatedUser()) as unknown as CognitoUser;
      return {
        id: user.username,
        fullName: user.attributes.name,
        avatar: user.attributes.picture,
      };
    } catch (error) {
      return null;
    }
  },
  forgotPassword: async (input) => {
    try {
      await Auth.forgotPassword(input.email);
      return {
        success: true,
        redirectTo: "/update-password",
      };
    } catch (error) {
      return getErrorResponse(error);
    }
  },
  /**
   * You will need to swizzle AuthPage, and edit inputs of UpdatePasswordPage with:
   * type UpdatePasswordFormTypes = {
   *   email?: string;
   *   code?: string;
   *   password?: string;
   * };
   */
  updatePassword: async (input) => {
    try {
      await Auth.forgotPasswordSubmit(input.email, input.code, input.password);
      return {
        success: true,
        redirectTo: "/login",
      };
    } catch (error) {
      return getErrorResponse(error);
    }
  },
};

export { authProvider };

[omeraplak]

Thank you @Lagyu ! 💥

[Lagyu]

My pleasure.

Also, this is my axios.ts implementation of rest-data-provider for api gateway authentication.
This works, but you may be able to improve:

import { HttpError } from "@refinedev/core";
import axios from "axios";
import { Auth } from "aws-amplify";

const getToken: (counter?: number) => Promise<string> = async (counter = 0) => {
  return Auth.currentSession()
    .then((session) => {
      return session.getIdToken().getJwtToken();
    })
    .catch(() => {
      // sometimes not successful for first time.
      if (counter < 5) {
        console.warn("Failed to get token, retrying...");
        return getToken(counter + 1);
      }
      console.error("Failed to get token");
      return "";
    });
};

const axiosInstance = axios.create();

// delay token retrieval until request is made, to avoid making initial request without token
axiosInstance.interceptors.request.use(async (request) => {
  const token = await getToken();
  request.headers["Authorization"] = `Bearer ${token}`;
  return request;
});
);

export { axiosInstance };