DEV Community

loading...
Cover image for #30DaysofAppwrite : OAuth Providers
Appwrite

#30DaysofAppwrite : OAuth Providers

Damodar Lohani
・3 min read

Intro

Appwrite is an open-source, self-hosted Backend-as-a-Service that makes app development easier with a suite of SDKs and APIs to accelerate app development. #30DaysOfAppwrite is a month long event focussed at giving developers a walkthrough of all of Appwrite's features, starting from the basics to more advanced features like cloud functions! Alongside we will also be building a fully featured Medium Clone to demonstrate how these concepts can be applied when building a real world app. We also have some exciting prizes for developers who follow along with us!

OAuth Providers

With Appwrite, it's super easy to setup many OAuth2 providers to provide your users to authenticate with their social accounts. Appwrite supports tons of OAuth2 providers including Google, Facebook, Twitter, GitHub and many more. The best part: most of the OAuth2 providers came as pull requests from the open-source community! ❤️

In today's session we will look into how we can set up and use Google Sign In with our Appwrite-powered application.

Setting up Google OAuth2 Settings

In the Appwrite console, visit the Users->OAuth2 Providers page. There, find Google from the list and turn the switch on. In order to complete this you will need App ID and App Secret which you can easily setup from Google API Console. Check out their official documentation for more details.

OAuth2 Setup Dialog

Once you get and fill the Google App ID and the App Secret, you need to provide the callback URL shown in the dialog to the Google OAuth2's Authorized redirect URIs.

Google oAuth2 Authorized redirect URIs

Logging In using OAuth2 Provider

Now that we have set up OAuth2 login, we can make a request to log in our user. First, in src/routes/Login.svelte let's add a Login with Google button.

<button on:click|preventDefault={loginWithGoogle}>Login With Google</button>
Enter fullscreen mode Exit fullscreen mode

Now we need to add a loginWithGoogle method to the our Login component's script:

const loginWithGoogle = async () => {
    try {
      await api.loginWithGoogle();
    } catch(error) {
      console.log(error.message);
    }
}
Enter fullscreen mode Exit fullscreen mode

Finally, in src/appwrite.js we need to add loginWithGoogle:

export const api = {
    //....existing code
    loginWithGoogle: async () => {
        try {
            await sdk.account.createOAuth2Session('google', 'http://localhost:3000', 'http://localhost:3000/#/login');
        } catch (error) {
            throw error;
        }
    },
}
Enter fullscreen mode Exit fullscreen mode

Here, we are calling the sdk.account.createOAuth2Session and we are passing in few parameters. The first parameter is the Provider. For us, it's google. The second parameter is the URL to redirect to if the login is successful. The third parameter is the URL to redirect to if the login fails. Here we are providing localhost, for we are testing the app locally. Once we host our app online, we need to provide the updated URLs for successful and failed logins.

Now, if you tap Login with Google, you should be taken to the Google OAuth Consent screen. Once you select your valid Google account, you should be able to login and are redirected back to http://localhost:3000. You can check our app's navigation bar to see if the new account name has loaded successfully.

Credits

We hope you liked this write up. You can follow #30DaysOfAppwrite on Social Media to keep up with all of our posts. The complete event timeline can be found here

Feel free to reach out to us on Discord if you would like to learn more about Appwrite, Aliens or Unicorns 🦄. Stay tuned for tomorrow's article! Until then 👋

Discussion (0)