search

clerk / t3-turbo-and-clerk

A t3 Turbo starter with Clerk as the auth provider.
https://clerk.dev
1.02k stars 72 forks source link

Expo Eas Build Error: Execution failed for task ':app:createBundleReleaseJsAndAssets'. #80

Closed jayp97 closed 1 year ago

jayp97 commented 1 year ago

I've been trying to fix this for over two days and it's not clear what the problem is. The whole dev experience with expo has been horrible so far. So many errors with little to no info on the possible causes. Building for web is considerably less hassle.

The error is occurring when I am on the Run gradlew step of an eas build (Android play store build). Everything works fine locally. It's only when building for production that it doesn't work.

I was running eas build:configure then, eas build --platform android --profile preview

and this is my eas.json: { "build": { "development": { "developmentClient": true, "distribution": "internal" }, "preview": { "android": { "buildType": "apk" } }, "production": {} } }

This is the entire log of the "run gradlew" step of the eas build. Running 'gradlew :app:assembleRelease' in /home/expo/workingdir/build/apps/expo/android Downloading https://services.gradle.org/distributions/gradle-7.5.1-all.zip 10% 20%. 30%. 40% 50% 60% 70%. 80% 90% 100 % Welcome to Gradle 7.5.1! Here are the highlights of this release:

perkinsjr commented 1 year ago

Hi there,

I just ran a new build of the template and everything is working as expected.

Can you explain what modifications you've made to the template? I'd also love to here why you think the experience with expo has been terrible, is that specific to Clerk or specific to the template?

If it is easier for you to debug please join the Discord where I can have a conversation in real time versus back and forth on issues https://clerk.com/support.

jayp97 commented 1 year ago

Hi @perkinsjr.

I finally found out what was going on and it was that for every single package I was installing I was using pnpm i -w [PACKAGE NAME]. This was my first time using pnpm and I was unaware until yesterday that it is not like npm and you should be using pnpm add to add packages to the specific app inside the monorepo and not the entire workspace.

Basically, I was adding all packages to the entire workspace, and some to the specific apps (expo, nextjs) and it messed up all the dependencies.

To fix this I just deleted all the package.json files from the apps and the root and also deleted the pnpm-lock.yaml from the root and then copied in the ones from the template again. Then one by one I add the the packages to the apps which used them (expo/nextjs).

After this I was able to build using eas build with no errors.

This was obviously my own error. However, expo could have made it more clear perhaps in the build logs as to what was going on. I googled and googled and couldn't find anything.

This is my first mobile app so I can't compare to just plain react-native. By the sounds of things expo makes mobile development easier and faster. However, mobile development so far, in comparison to web development, has been such a frustrating experience.

I have no issue with this template. It's incredible. I wouldn't have been able to do full-stack & web + mobile development without it and clerk has been great to work with. Thank you very much.

I have one last hurdle to overcome. When I run eas build --platform android --profile development it builds fine. I set up the development server and I can run the apk on my phone and it all just works. However, when I build for production, eas build --platform android --profile production it won't work and I think it might be a clerk problem I'm having.

So for more context, the production build succeeds. I upload the .aab file to an internal test track on the android play store. I can download the test app from the playstore via tester link. Once the app is dowloaded I can get to the sign in page. This is just a sign-in button, using clerk with google as o-auth provider. I can click the button and it redirects me to the google login thing where I have to select my google account to use. (it also mentions clerk.shared.lcl.dev) It then redirects me back to my app but then it just gets stuck on the splash screen. Everything worked locally and in the development build. However, not in production. Given that it is failing after this sign-in step I was thinking it might have something to do with clerk. However, as it's in production I'm not sure how to get any logs of the issue. Have you come across any similar problems like this before @perkinsjr ?

Thanks for your help.

jayp97 commented 1 year ago

@perkinsjr In addition to the above comment.

My theory, based on these docs https://reactnavigation.org/docs/auth-flow/ is that it is stuck in some loading state when the token is trying to be restored and displays the Splash Screen in the meantime. Hence, why my app is stuck on the Splash Screen after I redirect back to my app from the google o-auth screen. Is this a Clerk problem?

In the apps/expo/src/utils/trpc.tsx file, How does this link up to my production app. I only see references to localhost here? Does this have to be updated on an individual basis to ensure the getBaseUrl function returns my production app?

Thanks.

perkinsjr commented 1 year ago

his is just a sign-in button, using clerk with google as o-auth provider. I can click the button and it redirects me to the google login thing where I have to select my google account to use. (it also mentions clerk.shared.lcl.dev) It then redirects me back to my app but then it just gets stuck on the splash screen.

It sounds like you haven't updated your Publishable Key to be production? Did you go through the production steps in Clerk and update your keys?

So yes the trpc part has to be updated.

Your app should successfully deploy. Assign your domain and use that instead of localhost for the url in the Expo app so that your Expo app can communicate with your backend when you are not in development.

This is in the deployment steps.

jayp97 commented 1 year ago

@perkinsjr The publishable key was set to the production key. but I hadn't changed the url to my production api. I updated both and created a new production build with eas. Now when I press the login button nothing happens. And since it's production I have no logs to see what's going wrong.

jayp97 commented 1 year ago

For reference this is my app.config.ts

import { ExpoConfig, ConfigContext } from "@expo/config";

const CLERK_PUBLISHABLE_KEY = [MY PROD PUBLISHABLE KEY];

const Config = {
  API_URL: "http://localhost:3000",
  APP_ENV: "development",
};

if (process.env.APP_ENV === "production") {
  Config.API_URL = "https://app.langchats.com";
  Config.APP_ENV = "production";
}

const defineConfig = (_ctx: ConfigContext): ExpoConfig => ({
  name: "langchats",
  owner: "jayp97",
  originalFullName: "@jayp97/langchats",
  slug: "langchats",
  scheme: "langchats",
  version: "1.0.0",
  orientation: "portrait",
  icon: "./assets/splash-icon.png",
  userInterfaceStyle: "light",
  splash: {
    image: "./assets/splash-icon.png",
    resizeMode: "contain",
    backgroundColor: "#2368A1",
  },
  updates: {
    fallbackToCacheTimeout: 0,
  },
  assetBundlePatterns: ["**/*"],
  ios: {
    supportsTablet: true,
    bundleIdentifier: "your.bundle.identifier",
    infoPlist: {
      NSMicrophoneUsageDescription: "This app uses the microphone",
    },
  },
  android: {
    adaptiveIcon: {
      foregroundImage: "./assets/splash-icon.png",
      backgroundColor: "#2e026d",
    },
    permissions: ["RECORD_AUDIO", "BILLING", "VIBRATE"],
    package: "com.langchats.app",
    versionCode: 3,
  },
  extra: {
    eas: {
      projectId: [MY PROJECT ID],
    },
    CLERK_PUBLISHABLE_KEY,
    ...Config,
  },
  plugins: ["./expo-plugins/with-modify-gradle.js"],
});

export default defineConfig;

This is my SignInWithOauth.tsx component. 

const SignInWithOAuth = () => {
  const { isLoaded, signIn, setSession } = useSignIn();
  const { signUp } = useSignUp();
  if (!isLoaded) return null;

  const handleSignInWithGooglePress = async () => {
    try {
      const redirectUrl = AuthSession.makeRedirectUri({
        path: "/oauth-native-callback",
      });

      await signIn.create({
        strategy: "oauth_google",
        redirectUrl,
      });

      const {
        firstFactorVerification: { externalVerificationRedirectURL },
      } = signIn;

      if (!externalVerificationRedirectURL)
        throw "Something went wrong during the OAuth flow. Try again.";

      const authResult = await AuthSession.startAsync({
        authUrl: externalVerificationRedirectURL.toString(),
        returnUrl: redirectUrl,
      });

      if (authResult.type !== "success") {
        throw "Something went wrong during the OAuth flow. Try again.";
      }

      // Get the rotatingTokenNonce from the redirect URL parameters
      const { rotating_token_nonce: rotatingTokenNonce } = authResult.params;

      await signIn.reload({ rotatingTokenNonce });

      const { createdSessionId } = signIn;

      if (createdSessionId) {
        // If we have a createdSessionId, then auth was successful
        await setSession(createdSessionId);
      } else {
        // If we have no createdSessionId, then this is a first time sign-in, so
        // we should process this as a signUp instead
        // Throw if we're not in the right state for creating a new user
        if (
          !signUp ||
          signIn.firstFactorVerification.status !== "transferable"
        ) {
          throw "Something went wrong during the Sign up OAuth flow. Please ensure that all sign up requirements are met.";
        }

        console.log(
          "Didn't have an account transferring, following through with new account sign up",
        );

        // Create user
        await signUp.create({ transfer: true });
        await signUp.reload({
          rotatingTokenNonce: authResult.params.rotating_token_nonce,
        });
        await setSession(signUp.createdSessionId);
      }
    } catch (err) {
      console.log(JSON.stringify(err, null, 2));
      console.log("error signing in", err);
    }
  };

  return (
    <View className="flex w-full flex-col items-center justify-center">
      <Text
        style={{ fontFamily: "PatuaOne_400Regular" }}
        className="text-lc-blue-90 pb-4 text-4xl font-semibold"
      >
        Login
      </Text>
      <View className="bg-lc-blue-90 w-3/5 rounded p-4 text-lg text-white">
        <Pressable onPress={handleSignInWithGooglePress}>
          <View className="flex flex-row items-center justify-center gap-2">
            <Text className="text-lc-blue-40">
              {/* //TODO: Add a google icon here */}
            </Text>
            <Text className="text-center text-4xl text-white">Gogle</Text>
          </View>
        </Pressable>
      </View>
    </View>
  );
};

export default SignInWithOAuth;
perkinsjr commented 1 year ago

Can you open a support ticket https://clerk.com/support this is more invovled then a github issue about building at this point.

jayp97 commented 1 year ago

@perkinsjr Will do! Thanks for your help so far though.

perkinsjr commented 1 year ago

I am going to close this in favor of support request.