![]() We need to create a new app within our new Firebase project. We need to create a new Firebase project and link it up to our OAuth Client! env.production file and you are good to go, no need to fiddling with the manifest! Step 5: Creating a New Firebase Project Then, reference the key in our package.json’s manifest key (this is already done for you in the scaffold): 1 "manifest" : įor production build, simply add the same key in either an. env.development: 1 CRX_PUBLIC_KEY = MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArohLehlLYJbZpN + 4jAqVDy9zDZrFyazMbB9xtNYtHTByqlpoHFTKkU61QKU34HAn366NtMzHu / sQwQgpMpi + V / ofK1l81OhbIufHn6 Now we can take the public key value generated and put it in our. key!Īlso, since the key should not be included in your production bundle, we should use Environment Variable to store this key! In this case, the property we want to add is called. But whenever we want to add a custom property to it, we can use the manifest field within our package's package.json! Because we're using Plasmo, we don't have to tinker with a manifest.json. Luckily, we can specify this with a property in our package.json's manifest. As for the public key, we'll need to tell Chrome about it. Make sure to discard of the private key or keep it somewhere safe. This creates a pairs of public and private key file locally within your browser. To quickly generate a pair of keys, use this tool: Itero KeyPairs Generator To read more about Chrome Extension ID and how to generate them, see: How to Create a Consistent ID for Your Chrome Extension Side Quest: Demystifying Chrome Extension IDsĪ Chrome Extension ID is "the first 128 bits of the SHA256 of an RSA public key encoded in base 16" (according to this Stackoverflow post). For example, LastPass's ID is hdokiejnpimakedhajhdlcegeplioahd. This is a unique ID that every Chrome extension has. Now we need to specify the Application ID. Google has stated that they are planning to deprecate Chrome apps but don't worry, this use of Chrome App is just an artifact. Here, we want to specify that the Client will be a Chrome app. We want to create a new Client ID using that consent page we just made! Great! Now that we've added our consent screen, it's time to create our OAuth Client! Step 3: Create an OAuth Client that uses that consent pageĬlick on Create Credentials and then OAuth Client ID. Note: These will be the email addresses allowed to use the OAuth consent screen until Google reviews your app and approves it for broader use. Note: For Firebase projects, this isn't necessary as Firebase will set them up for you. We need to go to the OAuth consent screen page to create one of these. Here's an example of what a consent screen looks like: It's what users see when they're asked whether they're okay with giving your app-specific information. This section is where we will configure our OAuth Consent Page and create our OAuth Client! Go to the APIs & Services section of your project. Name it whatever you want, and click Create.Ĭlick on Select Project to go to your project. Go to your Google Cloud Console and create a new project. Whew! Let's get started! Step 1: Create a Google Cloud Project Create a new Firebase app within the Firebase project.Links Firebase and Google Cloud Project.Create an OAuth Client that uses that consent page.The high-level steps look like this: (Don't worry if it seems like a lot, we'll go through them in detail!) The rest of this article will be all about plumbing the needed config between Google Cloud Console and Firebase Console to facilitate authentication! The rest of the tutorial is all about configuring the environment variables and how to find them! Once the project is created, cd inside and copy the example.env file into a. The command above will give us a scaffolded project that we can immediately jump into. Run: 1 pnpm create plasmo - with - firebase - auth Package Manager (npm, yarn, pnpm, etc…).It is free, open source, and MIT licensed. env file parsing, dependencies bundling, and more. It offers a browser extension development suite that makes creating powerful Chrome extensions seamless with live-reloading. We will be using the Plasmo Framework in this blog post. □ To see a completed version of the code referenced here, check out with-firebase-auth.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |