How to integrate Hasura with Firebase Authentication

Question

Does anyone here have experienced Hasura graphql ? I started exploring @postgrest to fulfill my serverless needs, but I end up dumping it since its hard to make its authentication. Just last two day I learned that I can do phone number authentication with Firebase Authentication with my reactjs App. Then I look back at my database solution, I learned that Apollo graphql and also Hasura may solve my database needs. I have no Idea whether I can integrate my phone auth so that It produce jwt and can be used in Hasura / Apollo maybe? Cut story short, is Hasura famous among us here ? What do you guys use for Graphql authentication ? Can it integrate with Firebase authentication ?

any suggestions much appreciated!

Answer 1

I've integrated GraphQL + Firebase Auth with both frontend and backend system before. I didn't use Hasura, just a normal Apollo GraphQL, but the concept should be the same. Hope it can help

Frontend phone authentication

In this example the frontend was developed using Flutter. Get firebaseToken from FirebaseAuth, passing to login Mutation with input firebaseToken. This login Mutation must return JWT token. Store this JWT token securely in your app

await FirebaseAuth.instance.verifyPhoneNumber(
        phoneNumber: phoneNumber,
        verificationCompleted:
            (PhoneAuthCredential credential) async {
          final UserCredential cr =
              await FirebaseAuth.instance
                  .signInWithCredential(credential);
          final String firebaseToken =
              await cr.user!.getIdToken();
          final QueryResult qe = await runMutation(
                  {"firebaseToken": firebaseToken})
              .networkResult!;
          final String jwt =
              Login$Mutation.fromJson(qe.data!)
                  .login
                  .jwtToken;

          ...
        },
        ...
      );

GraphQL

mutation Login($firebaseToken: String!) {
  login(input: { firebaseToken: $firebaseToken }) {
    jwtToken
  }
}

Schema GQL

type Mutation {
      login(input: LoginInput!): Login! }

input LoginInput {
  firebaseToken: String!
}

type Login {
  jwtToken: String!
}

Backend Auth Resolver

In this example, backend was developed using NestJS (node.js). First create Auth resolver with login Mutation that accept firebaseToken. This login Mutation need to verify Id Token (Using Firebase Admin SDK). After verify you can get decodedToken, either phone number or email depending on your Firebase project authentication settings. Use this info to create new user if not exist. Return JWT token using payload e:g {id: user.id}

@Mutation(() => LoginDTO)
  async login(
    @Args('input', { type: () => LoginInput }) input: LoginInput
  ): Promise<LoginDTO> {
    const decodedToken = await this.firebaseAuth.app
      .auth()
      .verifyIdToken(input.firebaseToken);
    const number = (
      decodedToken.firebase.identities.phone[0] as string
    ).substring(1);
    const user = await this.passengerService.findOrCreateUserWithMobileNumber(
      number
    );
    const payload = { id: user.id };
    return {
      jwtToken: this.jwtService.sign(payload),
    };
  }