oktadev / okta-ionic-social-login-example

Ionic + Sign in with Apple and Google

Ionic + Sign in with Apple and Google

Please read Ionic + Sign in with Apple and Google to read about how this app was created.

• Getting Started
• Links
• Help
• License

Getting Started

Prerequisites:

• Node 12+
• Ionic CLI

Clone this application to your local hard drive using Git.

git clone https://github.com/oktadeveloper/okta-ionic-social-login-example.git

Or use the GitHub CLI:

gh repo clone oktadeveloper/okta-ionic-social-login-example

Install this example's dependencies:

cd okta-ionic-social-login-example
npm i

Use Okta for Identity

You will need to create an OIDC Application in Okta to get your configuration settings to log in. You'll need to create an Okta developer account and register your app to get a client ID. Head on over to developer.okta.com/signup if you'd like to do this in your browser.

If you prefer the command line, install the Okta CLI. Run okta register to sign up for a new account.

Log in to your Okta Developer account or use okta apps create. If you use your browser, go to Applications > Add Application.

On the Create New Application page, select Native. Name your app Ionic Social, and configure it as follows:

• Login redirect URIs:
  • http://localhost:8100/callback
  • com.okta.dev-133337:/callback (where dev-133337.okta.com is your Okta Org URL)
• Logout redirect URIs:
  • http://localhost:8100/logout
  • com.okta.dev-133337:/logout
• Grant type allowed:
  • Authorization Code
  • Refresh Token
• Click Done

Run ionic serve and open http://localhost:8100 in a new incognito window. Click Login to sign in to your Okta developer account.

Links

This example uses the following open source libraries:

• Ionic
• Ionic AppAuth
• OktaDev Schematics

Help

Please post any questions as issues in this forum, as questions on the blog post, or on Stack Overflow with an "okta" tag.

License

Apache 2.0, see LICENSE.

okta-ionic-social-login-example's Issues

Using Example on Native with API Calls

When trying to add an API call to the example, I've been running into an issue with the HttpClient and/or ionic-native/http.

Since I started this as a web app, I initially used HttpClient thinking it was a universal option. Once I tried migrating the app to iOS, I realized that HttpClient creates CORS issues and isn't really a viable option. I started trying to migrate to ionic-native/http/ngx. However, if I use @ionic-native/http/ngx and load it in via the app.module, I get Error: Unable To Obtain Server Configuration on app load. I'm assuming there is some collision between the way the okta widget tries to load via the URL that causes an issue, but I am well beyond my depth.

My next attempt was to build an interceptor to convert the HttpClient calls over to a native, but I haven't been successful.

Is there an easy way to import the native http?

I stumbled across this: https://github.com/wi3land/ionic-appauth-capacitor-demo/issues/2 but the suggestion to just import without the ngx doesn't seem to work and goes against the ionic documentation.

Android Redirect

In your instructions, you mention needing to add the okta redirect to the info.plist for iOS. Is there a similar step needed for android's build.gradle files? I get to the point where I log in on android, but it won't redirect back to the application.